Was there some kind of resize changes that got added around the same time as the Column Control?
Was there some kind of resize changes that got added around the same time as the Column Control?
REJIS
Posts: 25Questions: 5Answers: 0
I started playing with the column control around DT 2.3.2, and noticed the columns and/or table doing this weird resize process on page load and when filtering. It almost looks like it is reading/calculating the width of every item in every column and adjusting sizes as it goes. The table and column width changes up to 8-10 times at like half second intervals.
At first I thought it was the column control's filters. I waited until it got updated and just downloaded everything again today, and it still does it. Even on tables without any Column Control when they load it readjusts itself for a few seconds. No AJAX calls either. It is just data local in the table. I have one page with two tables side by side- one has like 130 rows and the other a little over 1000 with each showing 15 rows at a time in pages. When the page loads the tables go nuts with one getting bigger and one getting smaller. It takes 3-5 seconds for them to stop sizing and settle, and is really annoying. Sometimes the columns will jump in size 10-20 pixels, and towards the end of the process it seems to adjust 1-3 pixels in size.
Answers
Can you give me a link to a page showing the issue? There was a change in DataTables 2.2.0 to do automatic column resizing when the width of the container changes. Perhaps that is what is causing problems here?
Allan
I made a video showing it sizing when I type in the filters. Hopefully it lets Google Drive links post here. https://drive.google.com/file/d/11nVl24et8KWhCJprmYegZd8t7yRbrVyq/view?usp=drivesdk
Seems very likely that it is the change in 2.2.0, but I'd need a test case showing the issue really. Have you tried setting the container to a fixed size (it might be, but I'm not sure without a test case
).
Allan
Likely just uses Bootstrap's Flexbox type layouts. Pretty much everything is in row and col classed divs. Looks like DataTables adds a style to my table tags setting them to width 100%. Are you saying a container needs a pixel size set? Which container too? The table tag seems to get wrapped in other dt div tags from layout. Some tables are in div tags that are just display block which would take up the full width of the browser. We usually stay away from putting the tables in divs or panels that are a fixed width because the tables tend to overflow outside the bounds of the parents and look weird.
My gut feeling is that DataTables adjusting its column widths is growing the container a small amount for some reason. That then causes DataTables to adjust its column widths, which ... [cycle].
It shouldn't cause the layout to change, but something is causing that (if I'm correct), and I'm not sure what.
Allan
That sounds accurate. I've been playing with things a bit. Usually where we define columns I have some classNames on all but 1-2 columns setting a width for the small columns that are 50-100 pixels and we let the description type columns grow. It seems to honor that and when it resizes it adds a width style to all the colgroup columns only updating the one without the classes setting width. When I take off the width classes it adjusts all 5 colgroup columns 25-28 times each (I count all the flashes of the changes in the DOM Element list). The immediate div parent of the table I set to a 700px width and it just sizes them all once at load. Decimals up to 3 places of px width (Totals 700.0005, so likely a decimal getting you). When I uncheck the width of the div it goes crazy adjusting all the columns 20+ times each again.
The question then, is why is it causing the table to redraw slightly wider. I'm afraid I would need a test case showing that to be able to try and diagnose the issue.
Allan
How do I make a test case? None of my pages are accesable to the public, and I don't have a web host of my own anymore. It does this on pretty much every page I put this version on. I'd think a lot more people would be seeing this.
Start with this technote:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
If you want to use ajax loaded data you can use one of the templates found here:
https://datatables.net/manual/tech-notes/9
Probably the key thing is to replicate the Bootstrap environment and styling that you have to try replicating the issue.
Kevin
I would need to somehow load Bootatrap 4.5.3 on one of those test sites. I've been trying to emulate it on one of the columnControl Example pages. It lets me pick Bootstrap 4 to render with there, but every layer of the pages here specifies a width in pixels or percent. I can't get it to do it on the pages here, but on all of my pages I can remove all other styles and classes and just have basic Bootstrap row and col classes and it does it. I'm still messing with it trying to figure out this magical combination. Sounds like the Resize code just needs to round down and strip off the fraction of a pixel...not sure why it needs to specify a width out to 3 decimal places of pixels.
Use the Download Builder to get the proper Datatables code for Bootstrap 4. You can select Bootstrap 4 in step 2 and change the URL to load BS 4.5.3 instead of 4.6.0.
Kevin
Because if I round it down, the column widths don't add up to 100% and we get column misalignment.
Column width control is easily the most complex part of DataTables. You'd think it would be easy, but it really really isn't! It would probably save about 10KB to strip all of that stuff out as well!
This thread was opened over night, which appears to be basically the same issue? Do you have scrolling enabled as well?
Allan
No scrolling enabled. Seeing your last comment I did try it in other browsers. I have been using Chromium Edge. I tried Chrome and Firefox and the same resize cycle happens in them. I'm still trying out things on my end. The scrolling gave me an idea- Our pages are a sort of 3 row Flexbox layout too with Header and footer on top and bottom with the body in the middle filling the rest of the space. The body section does have its own scrollbar to scroll the page content, and usually there is no browser scrollbar. Maybe if your code is looking for a scrollbar width on the browser or document/body level it isn't seeing it.
As a test I changed overflow to not scroll. The resize still happens, but it is almost made worse now and keeps sizing like 1 pixel for 2-3 more seconds.
It doesn't. It will look for it on the DataTable body container when scrolling is enabled, but not elsewhere.
Allan