Making Search & Filter wider but remaining responsive

Anonymous

#198747

Hi, at [pacmax.org](pacmax.org) I’d like to have the text search be wider (at least enough to fill the empty space on the right of the filter options—so that all together the search and filter options are as wide as the WP page) but remain responsive on smaller displays. I’ve tinkered with it but have not had much luck.

How might I achieve this?

Loving the plugin. Thank you.

Trevor

#198750

You have four controls on the form. You want the last three to stay as they are, but the first, the text search field, to take up the rest of the space? If so, I think the only way you could do this is to use flexbox. Read more about it here:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think it is flex-grow that you would need. The search box would be flex-grow: 1; and the other three fields would be flex-grow: 0;

The container (the form) you need to set to display: flex;

Anonymous

#199565

This reply has been marked as private.

Trevor

#199614

I haven’t checked this, but there are a couple of errors:

.searchandfilter[data-sf-form-id=”1216″] > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

important was spelled wrong, and it is the ul inside the form that needs to be display: flex, not the form itself.

Anonymous

#199724

This reply has been marked as private.

Trevor

#199728

I do not see display: flex on the UL just inside the form, and when I copied the code, the quote marks were the wrong type somehow, so I use the ID instead:

#search-filter-form-1216 > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

I can see that this nearly works, but the label inside the search li, and the input inside that need to be set to width: 100% also

Anonymous

#199743

This reply has been marked as private.

[Author]

Posts