I'm using the JQuery MultiSelect Dropdown and it's working correctly except when it's located within another bootstrap element. The code below is from https://www.codingvila.com/2019/01/bootstrap-jquery-multi-select-drop-down-list-with-checkbox-in-asp-dot-net-using-csharp-and-vb-dot-net.html and works fine when it's pasted in. However, when I paste this inside an aside bootstrap element the text doesn't show.
I'm using these references per the documentation
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
In my code I have the following
<script type="text/javascript">
$(function () {
$('[id*=lstStudents]').multiselect
({
includeSelectAllOption: true
});
});
</script>
The ASP/HTML is
<asp:ListBox ID="ListBox1" CssClass="dropdown dropdown-menu form-control" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Nikunj Satasiya" Value="1">Nikunj Satasiya</asp:ListItem>
<asp:ListItem Text="Ronak Rabadiya" Value="2" />
<asp:ListItem Text="Hiren Dobariya" Value="3" />
<asp:ListItem Text="Vivek Ghadiya" Value="4" />
<asp:ListItem Text="Pratik Pansuriya" Value="5" />
<asp:ListItem Text="Kishan Patel" Value="6" />
</asp:ListBox>
The bootstrap aside element where it is not showing the text correctly. I've gone through the inspector and can't seem to identify which setting is causing the text not to show. My CSS is limited so I'm not quite sure which element would cause this or where to zero in.
<aside class="control-sidebar control-sidebar-dark">
<div class="col-12">
<div class="row">
<div class="col-sm-12">
<label for="lstStudents">Student(s) ID</label>
<asp:ListBox ID="lstStudents" CssClass="dropdown dropdown-menu" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Nikunj Satasiya" Value="1" />
<asp:ListItem Text="Ronak Rabadiya" Value="2" />
<asp:ListItem Text="Hiren Dobariya" Value="3" />
<asp:ListItem Text="Vivek Ghadiya" Value="4" />
<asp:ListItem Text="Pratik Pansuriya" Value="5" />
<asp:ListItem Text="Kishan Patel" Value="6" />
</asp:ListBox>
</div>
</div>
</aside>