Topic: MDBDatatable is not changing with screen width and stays fixed in width
MDBDatatable is not as responsive as a normal table. It stays fixed in width when the screen width changes. So the layout looks weird if the screen width is small. Is there any solution that would be able to resolve this issue? Thanks
Hi! If you don't like how the table looks on smaller screens you can try to play a bit with the classes added to td elements yourself.
By default, the td elemets are receiving: white-space: no wrap and text-overflow:ellipsis styles. You can try to change those values so that the words could be wrapped to the next line. That would make the cells to look less "fixed".
For example:
.datatable table th, .datatable table td {
white-space: normal;
text-overflow: clip
}
You can also checkout the snippet I made for you, where I also decreased the padding for smaller screens: https://mdbootstrap.com/snippets/vue/b-cylwik/5586137#css-tab-view
Best Regards!
Riva priority commented 1 year ago
Thanks, Bartosz The MDBdatatable overflow parent div. Do you have any suggestions to solve it? Thanks.
Bartosz Cylwik staff commented 1 year ago
You could experiment with adjusting the font size or spacing, but when dealing with numerous data columns, the table will eventually overflow the parent element. The MDBDatatable component will then display a horizontal scrollbar.
While I'm unsure if this approach makes sense in you case, you might try dividing your data into two separate Datatable components. This could provide the columns with additional space.
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 Vue
- MDB Version: MDB5 4.0.0
- Device: thinkpad
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No