Customize Plus/Minus symbol in group table

Support
#1

Is there a way to customize plus/minus symbol in a group table? I want to change + and - symbol for example using arrows. Can someone help me to do this?
Thanks

#3

Hello!

You can change icon using styles. You should extend theme and add the following selector:

.jmix-grouptable-group-cell-expander:before {
  content: "\f07d";
}

The unicode of icons you can find here: Font Awesome Icons. Vaadin uses 4.4.0 version of FontAwesome.

#5

Hi Roman.
The code doesn’t work using CUBA Studio. Even inserting your selector, the symbol of the group table is always “+”.
Is necessary to use Jmix?
Is there a similar code for CUBA?
Thanks

#6

No, for CUBA works the following selector:

.c-grouptable-group-cell-expander:before {
  content: "\f07d";
}

Also, if changes are not applied, try to refresh browser page.

#7

Thanks. It works for plus (+).
What is the right command for the minus (-)?
Is there a guide to know all the customizable properties?

#8

The proper way of writing CSS selectors is to check applied styles in the dev-tools of your browsers, e.g.

image
image997×813 64.7 KB

The following selector should work:

.v-expanded .c-grouptable-group-cell-expander:before {
  content: "\f176";
}