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"


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/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • 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
Tags