Datatable not always shown

Topic: Datatable <select> not always shown

antoniojg pro premium asked 3 months 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>


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>

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"

Piotr Glejzer staff commented 3 months ago

Hello, are you talking about normal bootstrap select or material select?

antoniojg pro premium commented 3 months ago

It's the normal select, automatically placed by .DataTable() function.

Piotr Glejzer staff commented 3 months ago

to display bootstrap select in our components you have to add class 'browser-default' , look into this

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.7.3
  • Device: Desktop
  • Browser: Opera/Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No