Justin Kredible Justin Kredible - 4 months ago 16
CSS Question

Contents of <select> disappear when page is resized

I have 3 html selects in a row on my page that normally display fine. However, when the page is resized below a certain width, the contents of all of the selects disappear. You can view both states here:

Normal Width Screenshot

Resized Screenshot

I am using Bootstrap 2.3.2 and these are just normal select tags with no additional styling or Javascript. Does anyone know how to prevent the contents of my select tag from disappearing when the page is resized? Using a different version of Bootstrap is not an option. I'm stuck with 2.3.2.

Also, if I keep decreasing the width, the contents of the selects come back. I'm guessing it has something to do with bootstrap and responsiveness etc. but I don't know enough about Bootstrap to pin down the exact cause.

I was able to use Chrome Developer Tools and found that when the text in the select disappear, if I disable the font-size in the following:

@media (max-width: 1024px) and (min-width: 481px)
label, button, select, .uiGrid.table td, .uiGrid.table th {
font-size: inherit;
}


The text in the select reappears. Unfortunately that bit of CSS is defined in a shared library that I do not control.

As requested, here is the code that I use to add the selects to the page:

<div class="pull-left">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<select class="input-medium">
<option>Select 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="btn-group">
<select class="input-medium">
<option>Select 2</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="btn-group">
<select class="input-medium">
<option>Select 3</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
</div>
</div>

Answer

Take the hammer and override the media query stuff in your CSS:

@media (max-width: 1024px) and (min-width: 481px)
label, button, select, .uiGrid.table td, .uiGrid.table th {
    font-size: (whatever value you need ie. 24px) !important;
}