Topic: Datatable horizontal scrollbar is not visible when datatable is inside accordion
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
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 2 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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Dawid Wajszczuk staff commented 2 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 2 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.