When I tried to implement some dropdown lists with Bootstrap on a webpage, I noticed that one of them gets cut off on the right side, which looks like this:
I am testing with Firefox. Firebug doesn't show any conflict with an overflow
attribute, but funnily enough when I de- and reactivate the width
attribute of the menu's parent container, the line finally appears, but bold though. I tested the page with IE, where the menu looked fine. Is this just a flaw of Firefox, and can this be fixed somehow? I know this is just a minor cosmetic issue, but it looks really awful in my eyes...
Here's some of my HTML code:
<div class="container">
...
<div class="para">
...
<form action="form.php" method="post" enctype="multipart/form data">
...
<div class="form-group">
...
<div class="row">
...
<div class="col-md-1">
<select name="unit" size="1" class="form-control unit" required>
<option value="kW">kW</option>
<option value="MW">MW</option>
<option value="GW">GW</option>
<option value="kWh">kWh</option>
<option value="MWh">MWh</option>
<option value="GWh">GWh</option>
</select>
</div>
...
</div>
</div>
...
</form>
</div>