Hemanth Gowda Hemanth Gowda - 3 months ago 16
HTML Question

Dropdown field automatically closes after opening in IE11

I have a dropdown which has some options in it.

<div class="control-group pull-left">
<label class=" help-inline"> Notify staff
<input type="text" class="span1 min" name="someName"/>
<select id="duration-unit-outingMinCutoff" name="duration-unit-outingMinCutoff" class="span2">
<option value="minutes" selected="selected">minutes</option>
<option value="hours" selected="selected">hour(s)</option>
<option value="days" selected="selected">day(s)</option>
</select>
prior to start time
</label>
</div>


When I click on dropdown it opens and closes suddenly on IE. Open this in IE and you can see issue i am talking about.

Answer

Your use of <label> is the issue. Inputs should not go inside labels. Fiddle.

<div class="control-group pull-left">
<label class=" help-inline"> Notify staff</label>
    <input type="text" class="span1 min" name="group.outingMinCutoff" />
    <select id="duration-unit-outingMinCutoff" name="duration-unit-outingMinCutoff" class="span2">
      <option value="minutes">
        minutes
      </option>
      <option value="hours">
        hour(s)
      </option>
      <option value="days">
        day(s)
      </option>
    </select>
    <label> prior to start time</label>
</div>