Datatable contenteditable and scroll issue


Topic: Datatable contenteditable and scroll issue

O1ivier pro premium priority asked 5 years ago

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();
});

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!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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