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


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


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

  • 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