Combo Box Formatting Issue

Anonymous

#21463

Hi folks

This is our page where we have the widget.
http://newsite.creativeconnections.org/cc/art-collection/

If you notice there are 2 fields appearing for combo boxes and then when clicked one goes under the other. Not an issue if simple dropdown.

How can this be fixed?

Thanks

P.S. Happy to securely give support staff site admin access to test

Ross Moderator

#21544

Hi Serge

We are using chosen for those – https://harvesthq.github.io/chosen/

I can see this issue, it looks like some styles from your theme are interferring with the chosen styles.

I can in your source code, that the Chosen styles are loaded before your theme, you might want to try switching the loading order around:

<link rel='stylesheet' id='search-filter-chosen-styles-css'  href='http://newsite.creativeconnections.org/cc/wp-content/plugins/search-filter-pro/public/assets/css/chosen.min.css?ver=1.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='search-filter-plugin-styles-css'  href='http://newsite.creativeconnections.org/cc/wp-content/plugins/search-filter-pro/public/assets/css/search-filter.min.css?ver=1.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='krown-style-parties-css'  href='http://newsite.creativeconnections.org/cc/wp-content/themes/goodwork/css/third-parties.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='krown-style-css'  href='http://newsite.creativeconnections.org/cc/wp-content/themes/goodwork/style.css?ver=4.2.2' type='text/css' media='all' />

Thanks

Anonymous

#21550

ok, glad to hear you identified the problem

the fix is over my head

can you provide specific steps of how to do this?
Which file to edit? (Can it be sustainable (as in not lost in an update) by being done in a child theme or something like it?)
What the edits should be? (or provide a fix file)

Thanks

Ross Moderator

#21605

Hi Serge

I do not know what the edit would be superficially for your theme.

Basiscally, you need to re-order your CSS files in your theme, or get them to load before S&F – S&F uses a pretty standard hook to do this, I think your theme might be forcing itself to be loaded last which doesn’t help.

Anyway, for this you would need to look at the FAQs and the question How do I remove CSS/JS files when I don’t need them?

Then you would need to find a way to load these same scripts after your themes CSS.

If this all sounds a bit tricky, I would suggest just putting the CSS from Search & Filter at the end of you theme’s CSS file which can be found:

search-filter-pro\src\public\assets\css

You would need to copy the contents of first chosen.min.css and then search-filter.css – basically you add the Search & Filter CSS to your own stylesheets, after everything else 🙂

Thanks

Anonymous

#21766

I took the 2 CSS files and pasted their entire content into the child theme style.css and it did not work

[Author]

Posts