DataTables isn't the right width till I change window width

podfeet

I've got a curious problem. My table is created using mustaches, and I'm using Bootstrap collapse to hide all rows and columns at page load. I have a "check all" button that flips the switches on 33 currencies to be displayed in this 33x33 currency grid. All of the grid is displayed but DataTables puts it in this wee tiny column. If I just barely change the browser window width, the table jumps to fill the screen correctly (it's over 2000px wide).

The same behavior happens if you click the switches one by one but it takes more clicks to notice that the table is in this wee tiny column.

My code in a glitch:
https://glitch.com/edit/#!/currency-conversion-v3?path=index.html:1:0

Fiddled with a lot of things today but haven't cracked the code on what I'm missing, any help would be appreciated!

colin

That's a lot of code to look at. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

podfeet

Oh, sorry about that - I misunderstood! It will take me a while to reproduce. May not even be able to take that much time (which explains why it's hard for you folks to read through it).

How about a concise question. Is there a setting I can fiddle with that controls the width of the DataTable when first drawn vs. when the window width is changed? The inspector reveals that it's this segment of the JavaScript, that is the content-box starts really narrow and suddenly jumps when I change the window width.

'box-sizing': 'content-box',
width: scroll.sXInner || '100%'

The code I posted in Glitch might have the singular value that you can see the behavior to understand the context of my question?

colin

You could have an event to catch the window size changing, and then call columns.adjust(), that normally sorts out most display issues.

Colin

podfeet

Thanks @colin - but I think, if I understand this properly, that I have the opposite problem. When the window width changes, the table looks perfect. It's on initial load that it's crammed into this silly narrow column. here's a couple of screenshots of what's changing between first refresh and nudging window width.

kthorngren

I'm using Bootstrap collapse to hide all rows and columns at page load.

If the Datatable is hidden when initialized then use columns.adjust() when it becomes visible. Here is an example using tabs:
https://datatables.net/examples/api/tabs_and_scrolling.html

Not sure if you have this but you probably also will need style="width:100%" on your table tag as shown in this example:
https://datatables.net/examples/basic_init/flexible_width.html

Kevin

podfeet

THANK YOU @kthorngren !!! the style="width:100%" was the answer. Woohoo, you rock.

I'm going to look at columns.adjust() too because now I'm struggling to get the header row of cells to line up with the body cells.

kthorngren

If you are using the Responsive Extension then you will also want to use responsive.recalc().

Kevin