Search bar and dropdown boxes width

Anonymous

#225333

Hi, thanks for building a great product! I’ve searched on the forum for how to do this but sorry I couldn’t see how. I have created a search bar and dropdown boxes in the left sidebar. What css do I need to make the width of them be the width of the left sidebar and so they are all the same width (well with whatever padding or margin is advised)? Thanks for your help

Anonymous

#225335

Hi!
What you want to achieve is certainly feasible, but you do need to understand how CSS rules work.
First you need to determine the exact width of the sidebar on your site. Let’s say it’s width: 250px;
In the main CSS file of your WP site you could enter these rules:
.searchandfilter select.sf-input-select {
width: 250px;
}
and
.searchandfilter .sf-input-text {
width: 250px;
}
Illustrated in screenshots #1 (before) and #2 (after applying those CSS rules) attached.
However, if your site has a responsive design (as it should) in order to be viewed correctly on desktops, tablets and mobile phones… You’ll have to examine each of your CSS responsive sections, in order to check the various widths of your sidebar, and enter specific widths for the select fields and the input field for each media case!

Trevor

#225337

@contact6536

Are you able to send me a live link/URL to your search page so I can take a look?

As @papijo says, it will need some custom CSS. Probably to make their width 100% (which then inherits the width of the parent), but sometimes their parent also needs a width of 100% setting.

Anonymous

#225366

@trevor
I tried to set those fields to width: 100% and it did not work.

Trevor

#225368

I would need to see the search form on a live link/URL so I can take a look.

[Author]

Posts