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.) https://mdbootstrap.com/snippets/standard/ererling-sande-no/3105619#html-tab-view


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: https://mdbootstrap.com/snippets/standard/kpienkowska/5929027


Dawid Wajszczuk staff answered 3 years ago


Hi,

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', ()=>{
 datatableInstance.update()
})

Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3113867#js-tab-view. We will try to come up with better solution.

Keep coding,
Dawid



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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