CSS for dropdown

Anonymous

#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

#193034

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

Anonymous

#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

#193040

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

Anonymous

#193044

Done

Trevor

#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;
}

Anonymous

#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

#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;
}

Anonymous

#193063

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

[Author]

Posts