Forums › Forums › Search & Filter Pro › Dropdown Field Spacing Question

Viewing 9 posts - 1 through 9 (of 9 total)
  • Anonymous
    (Private)  July 15, 2017 at 10:54 pm #120798

    Hi,
    How do I reduce the spacing between the the headings of my dropdowns and my dropdown fields? Also, how do I reduce the spacing between dropdown fields? The S&F form is used via a shortcode for one page and via woocommerce shop on another. Thanks and your help is greatly appreciated.

    Ron

    Trevor
    (Private)  July 16, 2017 at 10:08 am #120821

    Hi

    If you can give me live links/URLs to the two pages with the search form on, and make screenshots of them and annotate them as to what you want changing, upload those images to a file sharing site (like Cloudup) and share the links with me?

    Anonymous
    (Private)  July 16, 2017 at 11:43 am #120827
    This reply has been marked as private.
    Trevor
    (Private)  July 17, 2017 at 7:54 am #120889

    OK, the gap between them is mainly made with two elements that I can see when using the browser inspector. On the heading there is some bottom padding, and in the dropdown select some top margin. The CSS that sets these looks like this respectively:

    .searchandfilter h4 {
  padding: 5px 0 10px;
}

    (the 10px is the bottom setting) and

    .widget select {
  margin-top: 13px;
}

    And to respectively reset these:

    .widget .searchandfilter h4 {
  padding-bottom: 1px;
}

    and

    .widget .searchandfilter select {
  margin-top: 1px;
}

    You can change the values as you need or set them to 0 (no units needed for 0 values). If the gap between the dropdown select and the next field title is too great, then you can add padding-top and margin-bottom respectively to those two snippets.

    It is hard to be precise, as your CSS is combined and minified for performance (making developing harder).

    Anonymous
    (Private)  July 17, 2017 at 1:54 pm #120973

    Thanks Trevor!

    However the change you recommended didn’t work. Before reaching out to you I tried:

    .searchandfilter ul li {
    padding-top: 5px;
    padding-bottom: 5px;
    }

    And that reduced the spacing between the first header titled ‘sort results by’ and the search bar above it. However I’m not sure how to create the same results for the drop downs and headers below that first one.

    I thought your code above would work but it didn’t. Do you have any other suggestions?

    Trevor
    (Private)  July 17, 2017 at 3:27 pm #120998

    It may be different across browsers. Maybe you need to add !important, like this:

    margin-top 1px !important;

    Anonymous
    (Private)  July 18, 2017 at 1:03 am #121125
    This reply has been marked as private.
    Trevor
    (Private)  July 18, 2017 at 7:22 am #121176

    Most odd. When I view the page in the Inspector in Firefox, they are not there (the <p>‘s or <br>‘s). When I look at the page source code, they are not there either. That means that your browser must be adding them? Did you try another browser on your computer?

    I suppose that you could give them some custom CSS, like this:

    .searchandfilter label br {
  height: 0;
  line-height: 0;
}

    or maybe

    .searchandfilter label br {display: none;}
    Anonymous
    (Private)  July 18, 2017 at 11:52 am #121242

    Thanks Trevor!

    The main piece that cleaned up the formatting was:
    .searchandfilter label br {display: none;}

    Then I also used the following like you recommended to clean up some additional formatting:

    .searchandfilter ul li {
  padding-top: 1px;
  padding-bottom: 1px;
}

.widget li {
  line-height:10px;
}

.searchandfilter p {
  margin-top: 1px;
  margin-bottom: 1px;
}

.widget select {
  margin-top: 1px;
  margin-bottom: 1px;
}

    I appreciate all the help!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)