I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented).
This is the code I have so far, and it's accessible on jsfiddle http://jsfiddle.net/jwayne2978/E2ACU/.
<div style="width:500px; margin:auto">
<div class="input-group">
<input type="text" class="form-control input-sm">
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-sm">Search</button>
<button type="button" class="btn btn-default dropdown-toggle btn-dropdown" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
</ul>
</div>
</div>
</div>
The issue I'm encountering is that this HTML setup functions correctly in Chrome v33.0.x.y and IE v10, but not Firefox v27.0.1.
In Firefox, rather than the drop-down list showing up right below the drop-down button on the right side, it appears under the search field on the left.
Any insights into what might be causing this? Any assistance would be greatly appreciated.