Topic: Datatable horizontal scrollbar is not visible when datatable is inside accordion

Espen Rønning priority asked 1 year ago

Expected behavior Horizontal scrollbar is shown at the bottom of the table

Actual behavior Horizontal scrollbar is unabailable

Resources (screenshots, code snippets etc.)

Dawid Wajszczuk staff commented 1 year ago

Hi. Do you mean that you need to start scrolling in order to make scrollbar visible? Because this is what I see in the snippet.

Espen Rønning priority commented 1 year ago

Yes. When I open the accordion and hover over the table, there's no horizontal scrollbar at the bottom of the table.However, if I hover over the table AND do a vertical scroll with my mouse scrollwheel, the horizontal scrollbar appears.

Dawid Wajszczuk staff answered 1 year ago


Adding this code into your JS should solve the problem as for now.

const datatableInstance = new mdb.Datatable(datatable, basicData, {pagination: false,     
 hover: true, maxWidth: '100%'});

document.querySelector('.accordion').addEventListener('click', ()=>{

Here is the snippet We will try to come up with better solution.

Keep coding,

Please insert min. 20 characters.


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



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.7.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes