Datatable Expansion Issue

jpalmer

Hello,

I've been using this plugin and so far I'm really impressed. I am not using it to it's full potential by any means - but it's a great way to allow people to sort the data and show more/less data quickly.

However, I am having an issue where the datatable is not respecting the width of the container at all times. I am using blueprintcss and jquery UI tabs. So, the table itself is within two containers, and that container width is around 600 pixels. When I instantiate the datatable with bAutoWidth set to true, or when more rows are shown, the table often breaks out of the container.

Is there any solution for this, or can you think of anything I may do to prevent this?

Unfortunately, due to the nature of the application there is no easy way for me to know the number of columns ahead of time, or what columns will contain larger data, so it's not feasible for me to explicitly set the column widths.

Thanks in advance.
Great job on the plugin!

jacksumit

Hi Allan,

I am also facing a similar issue.

I am using datatable in a IFRAME. When IFRAME loads it has a data table with zero rows. There is add button in IFRAME, which adds one row on each click.

So when user keeps clicking this button height of datatable keeps increasing untill number of rows reaches the limit of 10, but the height of iframe remains same and a scroll bar is added to right side of iframe. I want it to work like, height of iframe should also increase with the increase in height of datatable insted of adding scrollbar.

I will be glad if you can help me in resolving this issue.

allan

Hi Guys,

The best way to have the auto width not go over a certain width is to put 'style="width:600px"' (or whatever) in the table element on the page. The reason DataTables can sometimes go over what you actually want it to is because it is trying to find the best fit for all of the data that is available to it, and without a distinct bound (such as that above) then it might 'think' (not to say that it is self-aware of course!) that the best thing to do is to expand the table a little.

A further complication can arise from the reflowing of the HTML while elements are loading at page load time. The Browser will often reflow the page, cause the widths of some dynamic elements to be changed, which is problematic for DataTables since it might have already don it's calculations based on an old width!

Having said all that, the auto width code is probably the oldest part of the code in DataTables (more or less unchanged since the original 1.0 version :-) ), and I certainly do want to revisit it sometime soon. But hopefully setting an absolute width will do the trick!

Regards,
Allan

jpalmer

Hi Alan,

Thanks again for the quick response.

So, I have found the solution (to my problem anyways).

Putting the following settings in my stylesheet made my table react the way I expect and made it infinitely more controllable:
table { table-layout:fixed; }
td { word-wrap:break-word;}
th { word-wrap:break-word;}

The main issue was with the table-layout setting. By default, most browsers set this value to 'auto'. This means that the table will essentially disregard any explicit widths and expand the size of the table if it thinks it's necessary. Setting this to 'fixed' solved that problem. However, it introduced an issue with word wrapping, hence the last two styles.

These three styles have made it much easier for me to work with tables in general, and has finally allowed this plugin to work the way I expect.

Hope this helps someone

Thanks again, Alan.

allan

Hi jpalmer,

Fantastic stuff - thanks for sharing this with us! I'll bare this in mind as it is sure to crop up again!

Regards,
Allan