Menu
I need to apply Bootstrap styling to a Razor @Html.DropDownList.
I have applied the form-control class to the control:
@Html.DropDownList("FacilityID", null, string.Empty, new { @class = "form-control" })
This correctly displays the select list using Bootstrap stylings. The problem is that the selectable, sub-items on of the list are not styled.
In viewing the generated HTML source, the rendered options are un-styled:
<option value="1">Some Option</option>
Is there anyway to get Bootstrap to style the entire dropdown correctly in ASP.Net MVC5 Razor view?
426
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
Why is my drop down menu not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution. Save this answer.
If it helps anyone ... I ended up going with the bootstrap-select component.
The Razor syntax is:
@Html.DropDownList("FacilityID", null, string.Empty, new { @class = "selectpicker" })
I didn't like the default gradient applied by Bootstrap to the button element this component generates, so I modified this in CSS to make it look like a regular Bootstrap form-control styled element:
.bootstrap-select > .btn {
background-image: none;
}
It's really simple just add the following to the end of the Razor DropDown:
,new { @class = "form-control" } )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
