table header does not automatically adjust to textarea inside td changing

smohanty

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

kthorngren

I tried calling columns.adjust() on a textarea.mouseup event but had weird results with this.

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

smohanty

http://live.datatables.net/guhunele/1/edit is a very basic example of textareas inside a td. Unfortunately, the th does resize automatically upon the textareas resizing.

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.

kthorngren

Are you using FixedHeader or other scrolling feature of Datatables?

Kevin

smohanty

I'm not using FixedHeader.

My scrollOptions are scrollY: 720, scrollCollapse: true, scrollX: true,,

I also have colReorder and then the colVis button enabled

kthorngren

Making 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 mouseup to use columns.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

smohanty

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 mouseup event to any textarea in the table.

By weird results, I had actually put an onmouseup attribute 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.

kthorngren

I cannot seem to bind the mouseup event to any textarea in the table.

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

smohanty

I will look into delegated events.

I tried binding by just doing
`$('#MY_TABLE_ID').on('textarea mouseup' , function () {
alert('foo');
})

smohanty

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

smohanty

Seems 'mouseup mousemove' does work. But there's noticeable lag and the event keeps firing way after for some reason.

kthorngren

Maybe a little tweak like this:
http://live.datatables.net/guhunele/9/edit

$('#example').on('mouseup', 'textarea', function () {
    table.columns.adjust();
  });

I changed the .on(..) parameters. As long as you execute this after the table is generated it should bind. You can place the code in initComplete to make sure.

Kevin

smohanty

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.

smohanty

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 calling columns