ColReorder + Column Search Changes the Table Width

fruedadev

As you can see in the test case, and as the title says, the width of the table changes as soon as you move a column. I've been investigating, and it works fine when I don't use the column search, that is, when the header hasn't any text box inside, but other than that I'm not able to find the cause. I'm sure the problem is something with my CSS or something like that, as it works with other examples I've seen in the forum, but I cannot find anything wrong.

Does anyone know what may the issue be, or what should I look for?

PS: As a curiosity, it works fine if you edit it in the JS Bin.

kthorngren

It looks to me like width: fit-content; in this CSS is causing the initial draw of the Datatable to not use the full container width:

div.dt-container {
    color: var(--dark-green);
    width: fit-content;
}

Any draw activity, searching, sorting, paging, etc, will cause the Datatable to resize to the full container width. I commented it out in this updated test case and the Datatable takes the full width initially.
https://live.datatables.net/dikuduka/95/edit

Kevin

fruedadev

Thanks kthorngren. Sadly, I need for the table to be always fitted to the content. Is there any way to have it, even if a re-draw is performed?

allan

To the content of the cells in the table - i.e. use the minimum width available and expand if needed? That isn't really a use case that I've worked towards supporting in DataTables I'm afraid - in nearly all uses I've encountered the table width being constant (or flowing with the document, not the content of the table) is desirable.

That said, there is a "hack" we can use due to how the styling of tables works. Add style="width:10px; margin: 0" to the table, to try and make it take minimal space. The columns will override that to take up the space they need, but only the space they need.

https://live.datatables.net/dikuduka/96/edit

Allan

fruedadev

Your “hack” worked like a charm, many thanks. Said that, for this project the user wants the table that way, but I'll take it into account in the future.

Thanks again, both of you.