Support Forums

Support Forums Forums Search & Filter Pro Making Search & Filter wider but remaining responsive

This topic is: resolved

Tagged: ,

This topic contains 6 replies, has 2 voices, and was last updated by  Maxwell White 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Maxwell White
    #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 Moderator
    #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;

    Maxwell White
    #199565
    This reply has been marked as private.
    Trevor Moderator
    #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.

    Maxwell White
    #199724
    This reply has been marked as private.
    Trevor Moderator
    #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

    Maxwell White
    #199743
    This reply has been marked as private.
Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Making Search & Filter wider but remaining responsive’ is closed to new replies.