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

Espen Rønning priority asked 3 years 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 3 years 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 3 years 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.

RossK1 priority answered 3 months ago

This is still a problem in MDB 7. Any update on a better solution than forcing an update when the accordion is expanded?

Kamila Pieńkowska staff commented 3 months ago

You can either load data asynchronously after accordion is opened for the first time or update only scrollbar in the datatable after accordion finish animation. For scrollbar to work you need to initiate it when component is shown so it is not a bug that you d not have scroll when you initiate it when datatable is hidden

Here is how to update only scrollbar:

Dawid Wajszczuk staff answered 3 years 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

  • ForumUser: 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