Currently, I am in the process of developing a website using Bootstrap and have encountered an issue with a select component. Below is the code snippet:
<tr>
<td>
<div class="textAlignCenter">
<select class="selectpicker" formControlName="maritalSituation">
<option value="" selected>Marital Status</option>
<option value="MARRIED">Married</option>
<option value="DIVORCED">Divorced</option>
<option value="SINGLE">Single</option>
<option value="WIDOWED">Widowed</option>
</select>
</div>
</td>
</tr>
I have utilized bootstrap-select for styling the dropdown (https://www.npmjs.com/package/bootstrap-select), but it seems to be invisible. Upon inspecting through Firebug, the following CSS class is applied:
select.selectpicker {
display: none !important;
}
This results in the select element not being visible. It's puzzling because when tested on fiddle, everything works fine (https://jsfiddle.net/flamant/3r6kucf8/4/)
The only relevant class affecting the select in my project is as follows:
select {
@extend input;
}
Even after removing this class, there is no change in visibility.