Topic: Datatable contenteditable and scroll issue
Hello,
I encounter an issue while using contenteditable attribute and when scroll is set to true for my Datatable.When I try to edit my table, the header is not following the same width as what i'm typing.You can clearly see the example in the snippet :
If you try to edit a column like "col 7" by typing a mail address for example : "mailaddresstest@mydomain.com", you'll see that the header is not resizing at all.
If you set the scrollX value to false, it works, but if the text is too long, the DataTable is displaying bad either.
Thank you.
EDIT : I just found the solution by myself. You can add this JS to resize dynamically the headers :
$('#action').on('focusout input', 'td[contenteditable]', function() {
table.columns.adjust();
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.8.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Magdalena Dembna staff premium commented 5 years ago
Thank you for sharing your solution - it might help other users with a similar issue. Kind regards and good luck with your project!