List Manager Forum

CSS for filters

User Alex King 2024-07-24 17:58:24

Hi - I've set up some filters for a table but would like to control some aspects of the filter via css presumably. For example, the category form of the filter needs to be made taller and wider so more options are displayed. I'm aware of the css table on the table but don't know what the name of the filters are in order to set the style.

Moonsoft support 2024-07-24 18:14:36

Hi,
all the fields used for the filters contain the property data-item="filter"

so you could add a common style for all of them with the selector in css, for ex, setting colors

{

color: red !important;

}

In case you need to style one specific field, the name you set for the filter will be its data-filter property so if for ex you have a filter named 'MyFilter', then the field can be styled with


{
//your custom css here
}

Hope this helps, please let us know if you need further details.

Best regards
Guillermo V.
Moonsoft Team

User Alex King 2024-07-24 18:58:05

Thanks - the first version works for me, so for example:

{
background-color: red !important;
}

turns all my filter with red background but:

{
background-color: red !important;
}

has no effect - I have a filter called "Title"

any ideas?


Moonsoft support 2024-07-25 09:09:27

Hi,
maybe the selector must be more specific for your case, depending the filter type being used, can you please share an url at the private section of this ticket? We'll take a quick look and let you know which would be the right style to add.

Thanks, regards
Guillermo V.
Moonsoft Team

User Alex King 2024-07-25 10:23:39

ok - see private data

Moonsoft support 2024-07-25 16:56:17

Hi,

Ok, for that filter type, please use the name of the column the filter is configured with. For your Title field:

{
// YOUR CSS
}

Please let us know if you need further help.

Thanks. Regards,
Guillermo V.
Monnsoft Team

User Alex King 2024-07-25 18:17:12

Thanks - that does the trick!

Moonsoft support 2024-07-25 18:31:28

Great, we close the ticket with this solution, please open a new one in case you find further issues.

Moonsoft Team

...
Support/development 40 hours

With the peace of mind of having a professional team at your service (20% discount)

Buy now!
...
Support/development

Perfect for small code changes or to correct any bug at your site

Buy now!