table header does not automatically adjust to textarea inside td changing
table header does not automatically adjust to textarea inside td changing
smohanty
Posts: 14Questions: 3Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Please watch my gif on https://imgur.com/QPtycqD
I have textareas inside tds. Adjusting the textarea does not automatically adjust the th.
It does however automatically adjust upon window.resize(). You can see this as I quickly open and close Dev Tools.
https://datatables.net/reference/api/columns.adjust() states that "DataTables will automatically call this method on the window resize event to keep the columns in sync with the re-flowed layout." . I tried calling columns.adjust() on a textarea.mouseup event but had weird results with this.
I can't come up with a simple reprex for this unfortunately. And so I was wondering if anybody else has dealt with this and can offer a solution. Thanks!
Note: I'm also using Bootstrap 4.
table-bordered table-condensed compact display nowrap are the classes I've applied to the DT instance
This question has an accepted answers - jump to answer
Answers
Can you build a simple test case the shows this issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
http://live.datatables.net/guhunele/1/edit is a very basic example of
textareasinside atd. Unfortunately, thethdoes resize automatically upon thetextareasresizing.It's probably something in my setup then. Hard for me to reproduce my DT issues because I'm using a Meteor JS DT Wrapper.
https://github.com/Meteor-Community-Packages/meteor-tabular
Anyways, jw if anyone else had a similar issue and had any insights. I acknowledge it's hard with a reprex though.
Are you using FixedHeader or other scrolling feature of Datatables?
Kevin
I'm not using FixedHeader.
My scrollOptions are
scrollY: 720,scrollCollapse: true,scrollX: true,,I also have
colReorderand then thecolVisbutton enabledMaking some progress. I updated your test case with those options and the column headers don't adjust with the table. not surprising since Datatables clones the header and hides the original.
http://live.datatables.net/guhunele/2/edit
I added an event handler for
textarea mouseupto usecolumns.adjust(). It seems to work. Uncomment the statement.You say you have weird results. What are the weird results? Maybe you can try updating the test case to show the issue.
Kevin
Ah, good to know that adding those options did cause my error.
Thanks so much for your code.
I think my issue is with the Meteor wrapper. I cannot seem to bind the
mouseupevent to any textarea in the table.By weird results, I had actually put an
onmouseupattribute in html for each textarea. I had this calling an alert('foo'), and the alert would just randomly get called and would happen everytime the page loaded (without me actually resizing).I'll have to dig in deeper to how this Wrapper exposes the underlying table. Unfortunately, there are no options to produce reprexes for Meteor projects anymore. I'll see if I can find something in their repo for how to bind handlers.
Sounds like you might need to use delegated events as shown in this example and in mine.
How did you try binding the mouseup event?
Kevin
I will look into delegated events.
I tried binding by just doing
`$('#MY_TABLE_ID').on('textarea mouseup' , function () {
alert('foo');
})
I agree that delegated events could fix my issue. My concern with the Meteor Wrapper is that my textareas may not have been generated prior to me binding the event.
I've modified the selector in http://live.datatables.net/guhunele/7/edi using your example and you can see that it works.
However, in my app, mouseup is only responding to me clicking inside the textarea and releasing my mousebutton. (I.e. it's not responding to me releasing the 'drag' handlebars upon resizing it). I'll look into this, could just be my version of jQuery or something
Seems 'mouseup mousemove' does work. But there's noticeable lag and the event keeps firing way after for some reason.
Maybe a little tweak like this:
http://live.datatables.net/guhunele/9/edit
I changed the
.on(..)parameters. As long as you execute this after thetableis generated it should bind. You can place the code ininitCompleteto make sure.Kevin
I agree with you that that should fix it, unfortunately it does not though. It's gotta be something with this Meteor wrapper. I feel like using the delegated events is in fact ensuring that the table has fully rendered.
I think now my problem is that mouseup doesn't get triggered from releasing the 'resize handlebar'. I've tried a bunch of variations of mousevents to no avail.
No dice with ResizableObserver yet either.
I acknowledge it's gotta be something with my libs, etc..(bc it clearly works perfectly in the example with vanilla DT)
You're saying that this is happening with my extensions bc " Datatables clones the header and hides the original"...At this point, do you think there's a possible workaround by looking into that instead?
I really appreciate all the effort you've put into this.
Got it working!
$('#example').on('textarea mouseup', function () {const dt = $('#example').DataTable();dt.table().columns.adjust();});Little trial-and-error with the Meteor wrapper. But essentially, I had to use the
table()fn in the Api prior to callingcolumns