[Resolved] add a class to the Views custom filter dropdown options panel

[Author]

Posts

[oliverW-5]

Tell us what you are trying to do?
I'm trying to add some CSS style changes to the panel which appears when the dropdown filter is listed. I'm able to change use the class for the filter its self and it changes the background of the panel, but I want to add border / padding etc to it. Ideally I would like to add a secondary class for that section?

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
hidden link testing password is beta

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share bit more details about where on what page you added the filter, please share problem URL and to what filter you want to add border or what other CSS?

[oliverW-5]

Yep sure thing, so for example on hidden link

there is a view with 3 filters, all drop down type. I can style the dropdown button but cant seem to style the table as attached in the pics.

I just want the options in the dropdown to be inside one div with a class assigned which I can add css to

[Minesh]

It seems you want to style the select dropdown options style but the select options are shown based on the device and browser's native styles.

You can add some custom CSS code to style your dropdown as per your requirement or ask for help of professional CSS person.
hidden link

[oliverW-5]

Right, but in that docco, or this docco hidden link you need to be able to assign the class to the div.

How can i assign the class within toolset ?

[Minesh]

Can you please share admin access details so I will check how you added the filters and share the screenshot where you should assign the class.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Thank you for sharing admin access details but the shared admin access details is not working at this end. Can you please send me working admin access details.

I have set the next reply to private which means only you and I have access to it.

[oliverW-5]

Whoops. Im so sorry, I need more coffee, I hadnt hit save.

Have saved the creds as above, please let me know if there are any issues.

Cheers 🙂

[Minesh]

I see you are using blocks editor and to add a class, you should select your filter and on the right bar within the "Advanced" section you can add the CSS class name. Please check the following screenshot:
- hidden link

Then you can add the related CSS for the class name you added to the view's CSS section:
=> https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view

[oliverW-5]

Excellent, thanks!