I'm using bootstrap and have some select/dropdown boxes. They don't allow me to edit the text and I would like to make this select list an editable field so it can act as a select from existing or type a new value and click a Save to save it. How would I be able to do this via bootstrap (since my entire site is made with bootstrap).
So all I have today is the select below, but it doesn't allow the user to type into the select box. I guess I'm looking for a mix textbox and select/dropdown.
<select id="selectGroups" class="form-control" size="1">
@foreach(var g in Model)
{
<option value="@g">@g</option>
}
</select>
The selectpicker class is used in the select components to auto-initialize bootstrap-select as explained in the example: Example: HTML.
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.
There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.
To right-align a menu, use . dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
This looks like it solves my issue.
Why does HTML 5 not have editable combobox or local menus built in?
I just make the class of said input control to "form-control" and I get the bootstrap look.
Take a look on Select2 widget: http://ivaynberg.github.io/select2/
It allows text editing, and also you can check out bootstrap theme for it: https://fk.github.io/select2-bootstrap-css/
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