CSS for activated filter

Support
#1

How to find out which css selector I can use to make the filter-icon in the datagrid more pregnant if he is activated ?

image
image

People forget, they did put a filter, so to have an active filter in red whould help our support department :wink:

The things below did not work …

    vaadin-grid#material vaadin-grid-sorter iron-icon {
      transform: scale(0.8);
    }

    vaadin-grid#material vaadin-grid-sorter:not([direction]) iron-icon {
      color: rgba(0, 0, 0, var(--dark-disabled-opacity));
    }

    vaadin-grid#material vaadin-grid-sorter[direction] {
      color: rgba(0, 0, 0, var(--dark-primary-opacity));
    }
#2

Hi, @f.zehnder

By default, the active filter button is colored with the color from the lumo-primary-text-color theme variable. If you would like to change it, use the following styles:

vaadin-grid#material [jmix-role='column-filter-button']:is([activated]) {
  color: var(--lumo-error-color);
}

Regards,
Maria.

#3

Hi @m.orlova

Thank you for your help. After adding to my css

vaadin-grid#material [jmix-role='column-filter-button']:is([activated]) {
    color: orangered;
}

Still nothing changed …

What did I miss ?

Regards,
Felix

#4

Do you declare the column filter using the filterable attribute of the <column/> element in view descriptor? The provided styles are applied for the standard column filter provided by Jmix.

You can also check that the CSS selector for your data grid is correct and CSS file with added style are applied for the view.

#5

Found it now. I have to ommit the vaadin-grid#material.

[jmix-role='column-filter-button']:is([activated]) {
    color: orangered;
}

Thank you for your help ( and the DevTools ).