DataTables not sizing appropriately when scroll bars appear or disapear

luketheobscure

I've got a page with a DataTable on it. When "Show 10 Entries" is selected, there aren't any scrollbars. When I change it to 25 it triggers scrollbars on the browser (as expected). However, the DataTable does not resize it's width appropriately.

A similar bug occurs in a page with scrollbars, and changing to ten item removes the scrollbars.

allan

Could you try it with the 1.8.2.dev development version (the nightly) from the downloads page please: http://datatables.net/download/ , and if that doesn't help, can you give me a link to your page so I can see it in action please?

Thanks,
Allan

luketheobscure

Nightly build didn't fix it. I'm afraid the feature I'm working on is on our protected dev server, and probably will be there for a few more weeks.

Digging a little deeper, it looks like the cause of the problem is with "data" table, not the header or footer toolbars. Firebug is showing that it has a defined width in pixels (declared in element.style). Disabling this in Firebug causes the table to resize appropriately. This same width causes weird problems when you resize the page- the header and footer toolbars grow and shrink appropriately but the data table stays the same width.

luketheobscure

Also, I've tried it with and without bAutoWidth and bDestroy.

luketheobscure

Adding this fixed it, but it overrides all that hard work that's done to calculate the width!

[code]
jQuery('#results_table').width("100%");
[/code]

(#results_table being the id of the datatable)

fbas

that sucks.

would it work to periodically poll the header or footer elements and take the same size? those would be based on your width calculations at init, but won't change due to a scrollbar later on.

allan

Do you have: #results_table { width: 100%} in your CSS?

With the 1.8.2.dev nightly, the table shouldn't have a width assigned to it (other than 100%), unless it is needed by the size of the table being too small (at which point you should be seeing an error reported in the Javascript console).

Are you able to show us a screenshot of what is happening?

Thanks,
Allan

larryl

Hi Allan -

I am seeing the same problem in my own tables and also on the example at:

http://www.datatables.net/release-datatables/examples/basic_init/scroll_y.html

Enter any search (e.g. "Cam") that results in no rows, or in less rows than would trigger the scroll, and the table width extends to the right by about the width of the scrollbar. I see this in a variety of browsers.


Thanks!
Larry

larryl

This seems to work for me as a workaround:

[code]
fnDrawCallback: function () {
var wrapper = $('#results_table_wrapper'),
width = wrapper.width(),
scrollHead = wrapper.find('.dataTables_scrollHead').first(),
scrollBody = wrapper.find('.dataTables_scrollBody').first(),
scrollHeadTable = scrollHead.find('table').first();
scrollHead.width(width);
scrollHeadTable.width(width);
scrollBody.width(width);
}
[/code]

(Although it does not exactly resize the columns as it should.)

Larry

luketheobscure

Hi guys,

Adding "#results_table { width: 100%!important }" works. Here's a link to some very cropped sceenshots (trying to keep the project confidential, sorry about that): http://imgur.com/a/BHlKx

In the screen shots, you can see the green bar resizing appropriately, but the div with the DataTable won't shrink because of the defined width on the table content. This also causes problems when you resize the window. The header and footer will expand if needed, but the datatable stays the same size. Again, "100%important" fixes this behavior, so it's not really an issue for me right now. I would be happy to provide more information though, since you've helped me out so much.

-Luke