Hey everyone, I'm having a problem with the dropdown list. I added an ASP dropdown list to a modal popup using a Bootstrap theme, but when the modal pops up, the dropdown list appears twice. Check out this image for reference: https://i.stack.imgur.com/VNBqf.png
Here is the HTML CODE:
<div class="col-sm-2">
<div class="form-group form-group-sm">
<div class="form-line">
<asp:DropDownList ID="cboGender" runat="server">
<asp:ListItem>M</asp:ListItem>
<asp:ListItem>F</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
And here is the code from the browser:
<div class="form-group form-group-sm">
<div class="form-line">
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown"
data-id="MainContent_cboGender" title="Other">
<span class="filter-option pull-left">Other</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
<li data-original-index="0">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">M</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a></li>
<li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span
class="text">F</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span
class="text">Other</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div><select name="ctl00$MainContent$cboGender" id="MainContent_cboGender" class="" tabindex="-98">
<option value="M">M</option>
<option selected="selected" value="F">F</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</div>
I'm in need of some assistance to fix this issue. Any help would be greatly appreciated!