Table width with Bootstrap 5 col-auto
Table width with Bootstrap 5 col-auto
cs01lg
Posts: 2Questions: 1Answers: 0
Link to test case: https://live.datatables.net/rijeqigu/1/
Description of problem:
I want to lay my page out in two columns, I'm using Bootstrap columns. On the left I would like a DataTables table. I'm putting it in a col-auto Bootstrap column, the idea being the table will only take up as much space as it needs to show all the data
I'm using scrollY: '1000px' to fix the height
This all works very well except when using search. Each time you search the table causing the scroll bar to not be shown, then shown again, the table increases in size. Seemly by the scroll bar width
For example repeatedly search for 'Lon' and watch the table get wider
It seems to be the col-auto Bootstrap column width. If i use a col-lg-4 for example it does not happen
Is there a way of working around this behaviour?
Thank you
Answers
Hi,
I agree it shouldn't do that. However, I suspect stopping it from doing that is going to be very difficult since there is no specific width anywhere. DataTables will automatically assign 100% width if it isn't given an explicit width, and for some reason it is attempting to grow slightly on a draw - I suspect that is a sub-pixel rounding issue.
I'll need to dig into this in detail to understand what is going wrong. I'm not sure when I'll be able to do that, but I will try to do so.
Allan
Understood thank you for your comment Allan
I'll probably picked a fixed width combined with the horizontal scroll feature just in case some data happens causing a wider column
Could you use
col-md-8or similar rather thanauto. The second column could be auto?Allan