Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › CSS for dropdown

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Scott Russell
    (Private)  November 7, 2018 at 3:03 pm #193029

    Couldn’t find this on the forums (at least not a concise answer!)

    Can we target the a dropdown with CSS or something to increase the height?
    I have the form horizontally right now, with an input text, a dropdown (data combobox) and a submit:
    https://staging.ianmartin.com/

    I can target the padding on the input text and the button to adjust the size, but the dropdown in the middle is dramatically smaller so it looks funny.

    Is there some nice easy CSS that I’m missing to target the combo box to adjust height to match the other fields? Thanks!

    Scott

    Trevor Moderator
    (Private)  November 7, 2018 at 3:26 pm #193034

    To me they all look the same height, except that the middle one needs lifting up a bit (2px)?

    Scott Russell
    (Private)  November 7, 2018 at 3:28 pm #193036

    Yes – so I had to totally shrink the other two in order to make them the same size as the dropdown combobox (middle) because try as I might, I couldn’t target the dropdown and make it bigger … so I made the other two smaller! A bit of a jenky fix, but I do what I have to.

    Can you suggest CSS to lift it about 2px and/or make it bigger?

    Thanks, Trevor!

    Scott

    Trevor Moderator
    (Private)  November 7, 2018 at 3:35 pm #193040

    Can you first go to Search & Filter Settings and change the Combobox script from Chosen to Select2? That will make it easier.

    Scott Russell
    (Private)  November 7, 2018 at 3:39 pm #193044

    Done

    Trevor Moderator
    (Private)  November 7, 2018 at 3:54 pm #193046

    Try this:

    .searchandfilter .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
}
.searchandfilter .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
}
.searchandfilter .select2-container--default .select2-selection--single {
  border-radius: 7px;
  height: 50px;
}
    Scott Russell
    (Private)  November 7, 2018 at 4:10 pm #193051

    That’s excellent, thanks!
    But you’re right – it still looks like it’s ever so very slightly too low – like 2px as you said.

    Trevor Moderator
    (Private)  November 7, 2018 at 4:20 pm #193053

    Where you have this:

    .searchandfilter .select2-container--default .select2-selection--single {
    border-radius: 7px;
    height: 40px;
}

    Make it this:

    .searchandfilter .select2-container--default .select2-selection--single {
    border-radius: 7px;
    height: 40px;
    position: relative;
    top: -2px;
}
    Scott Russell
    (Private)  November 7, 2018 at 4:30 pm #193063

    Oh my gosh you are a GEEEENIUS. Thanks. That’s perfect.

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

The topic ‘CSS for dropdown’ is closed to new replies.