Topic: Datatable <select> not always shown
antoniojg free asked 5 years ago
Expected behavior
In data tables, display a select box to choose the number of rows to be shown.
Actual behavior
In some pages the select box (automatically created with DataTable() function) is displayed correctly, but in others it's not shown, although the code is present in html. Tried to insert the same code in the example index.html and got the same behaviour. The select is only shown if I force another style class, like "browser-default".
Resources (screenshots, code snippets etc.)
This is the standard snippet, which is the same in working and not working pages:
<label>Show <select name="portfoliosTable_length" aria-controls="portfoliosTable" class="custom-select custom-select-sm form-control form-control-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label>
Edit:
You can try to add this snippet to the sample index.html file provided with MDB-Pro:
<label>Options: <select class="custom-select">
<option value="1">Opt1</option>
<option value="2">Opt2</option>
<option value="3">Opt3</option>
<option value="4">Opt4</option>
</select></label>
Why the select box does not appear? I'm having the same trouble with other forms with select boxes. They are only shown if the class is set to "browser-default"
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.3
- Device: Desktop
- Browser: Opera/Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Hello, are you talking about normal bootstrap select or material select?
antoniojg free commented 5 years ago
It's the normal select, automatically placed by .DataTable() function.
Piotr Glejzer staff commented 5 years ago
to display bootstrap select in our components you have to add class 'browser-default' , look into this https://mdbootstrap.com/docs/jquery/forms/select/