I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble:
<div class="form-group row">
<div class="col-sm-1"> </div>
<label for="inputTitles" class="col-sm-3 col-form-label"><asp:Label ID="lblDocType" runat="server"></asp:Label></label>
<div class="col-sm-8">
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
In an attempt to solve this issue, I applied a stylesheet to the asp:DropDownList class:
<style>
.ddlwidth {
width: 1000px !important;
}
</style>
<asp:DropDownList class="form-control ddlwidth" ID="ddlDocType" runat="server" OnSelectedIndexChanged="DocType_Changed" AutoPostBack="true" Width="700" >
However, this solution did not work for me. When I tried removing the form-control class and increasing the width of the dropdownList, the width increased as intended. Unfortunately, removing the form-control class altered the appearance of the dropdown list, which I want to maintain.
Could anyone provide guidance on how to expand the width of the dropdownlist without eliminating the form-control class?
Here is a visual representation of the issue on my webpage: