Datatable not always shown


Topic: Datatable <select> not always shown

antoniojg pro premium asked a week 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"


Piotr Glejzer staff commented a week ago

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


antoniojg pro premium commented a week ago

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


Piotr Glejzer staff commented a week 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/


Please insert min. 20 characters.
Status

Open

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