Widget Doesn't Render Well

The problem is other style overriding search box style.

.content-shop-wrapper .site-main .type-product select, .listify_widget_search_listings.home-widget .site-main .job_search_form select, .site select, .site-main .archive-job_listing-toggle-inner select, .site-main .content-box select, .site-main .content-shop-wrapper .type-product select, .site-main .home-feature select, .site-main .job-package select, .site-main .job_listings select, .site-main .listify_widget_search_listings.home-widget .job_search_form select, .site-main .listing-by-term-inner select, .site-main .tabbed-listings-tabs a select, .site-main .type-product .thumbnails a select, .site-main .woocommerce div.product div.summary select, .site-main .woocommerce-main-image select, .site-main .woocommerce-page div.product div.summary select, .site-main .woocommerce-tabs select, .tabbed-listings-tabs .site-main a select, .type-product .thumbnails .site-main a select, .woocommerce div.product .site-main div.summary select, .woocommerce-page div.product .site-main div.summary select {
min-width: 175px;
}

in your style.css is forcing the select input of check-in and check-out to be at minimum 175px.

We try to keep consistent our widget but not always possible as many styles can override our.

Said that, you could solve it placing following css code at the end of your style.css ( or style.min.css) file:

#flexi_searchbox select {
min-width: auto !important;
}

In next release we’ll adjust our css accordingly.

Thanks for spotting this and let us know !

That’s fast! Thanks for being so responsive and for giving a solution to my problem.

I used the code you gave. But the theme stubbornly sticks to the same look.

I changed your code slightly from

#flexi_searchbox select {
min-width: auto !important;
}

to

#flexi_searchbox select {
min-width: 50px !important;
}

It looks better, but the dropdown arrow is off.I dont know why.

Again, thanks for the speedy reply and letting me know what is the prob.

I just hope we could find how to position the dropdown arrow nicely

Hi JomJalan,

if you’re checking the website using Firefox and/or Chrome / Safari this could be related to css which explicitely tells to not show the arrow with:

.content-shop-wrapper .site-main .type-product select, .facetwp-pager .facetwp-page, .job-manager-pagination li > *, .js-toggle-area-trigger, .listify_widget_search_listings.home-widget .site-main .job_search_form select, .site select, .site-main .archive-job_listing-toggle-inner select, .site-main .content-box select, .site-main .content-shop-wrapper .type-product select, .site-main .home-feature select, .site-main .job-package select, .site-main .job_listings select, .site-main .listify_widget_search_listings.home-widget .job_search_form select, .site-main .listing-by-term-inner select, .site-main .tabbed-listings-tabs a select, .site-main .type-product .thumbnails a select, .site-main .woocommerce div.product div.summary select, .site-main .woocommerce-main-image select, .site-main .woocommerce-page div.product div.summary select, .site-main .woocommerce-tabs select, .tabbed-listings-tabs .site-main a select, .type-product .thumbnails .site-main a select, .woocommerce div.product .site-main div.summary select, .woocommerce-page div.product .site-main div.summary select, a.page-numbers, span.page-numbers {
-moz-appearance: none;
-webkit-appearance: none;
…
}

using again our id selector:

#flexi_searchbox select {

    -moz-appearance: none;
    -webkit-appearance: none;

}

or change to :

#flexi_searchbox select {

-moz-appearance: button;
-webkit-appearance: button;

}

to show them again.

Anyway weird that:

#flexi_searchbox select {
min-width: auto !important;
}

is not working. Try to disable the Wp-supercache plugin just for the time to check, reload the page and see if this preventing the style to be applied as soon as you type it and let us know.

Thanks