htmlcssdjangocss-selectors

Select form doest show option preview

I found out that the css that I placed makes the preview to the option in the select forms disappear. I can't seem to find a solution online on how to fix this.

This is the css part that causes the said issue:

.form-control{
    height: 50px;
    padding: 20px;
    border-radius: 0 10px 0 10px;
}

As you can see below, when I remove this, the preview to the select option goes back.

With the css .form-control:

with the css

Without the css .form-control:

without the css

Here is "without the css" when I select an option: without the css

I'm using django so this is how to placed the form in my html template:

{{ form | crispy }}

Any help is greatly appreciated!

Solution

  • You have to not set height if you want padding or calculate content size and set padding.

    #cars {
  height: auto !important;
  padding: 20px;
}
    <select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>