Table width will not shrink

ashipma · April 2014

I am working on an application where it has two columns of tables. The left-most column contains two tables that allow the user to select different types of records. The right-most column contains the details for the selected record. The tables on the page will expand their width if the browser window is made wider, but if the user makes the browser window more narrow, the tables do not shrink their size so they will expand off the width of the page.

I have tried to set up an example on the live.datatables.net site, but I am unable to log in or register on that site. It keeps showing "checking..." when I try to log in or register.

But I can paste the HTML, CSS, and JavaScript sections here. If you run these and try to expand the page, it will expand fine. But then when you try to shrink the size of the page, the width of the tables do not shrink (or at least the width of the bottom right table does not shrink).

Oh, and I ran the DataTables debugger on my actual page and the code returned was "ekujow" (http://debug.datatables.net/ekujow)

Please let me know if I am doing something wrong here or if there is a better way to do this. Thank you for your help.

CSS:
[code]
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}

#content-left {
width: 20%;
vertical-align: top;
}

#content-main {
width: 80%;
vertical-align: top;
padding-left: 1em;
}

#group-details-container,
#group-assignment-container,
#group-table-container {
margin-bottom: 1.5em;
}
[/code]

JavaScript:
[code]
$(document).ready( function () {
var groupTable = $("#group-table").DataTable({
scrollY: "9em",
scrollCollapse: true,
paging: false,
ordering: false,
searching: false,
info: false,
drawCallback: function(settings, json){
$("#group-table tbody tr").each(function(index){
$("#rows").append("" + index + ",");
$(this).on("click", function(){
alert("click");
});
});
}
});
$("#field-table").DataTable({
scrollY: "9em",
scrollCollapse: true,
paging: false,
ordering: false,
searching: false,
info: false,
drawCallback: function(settings, json){
$("#field-table tbody tr").each(function(index){
$("#rows").append("" + index + ",");
$(this).on("click", function(){
alert("click");
});
});
}
});
$("#group-details-table").DataTable({
searching: false,
info: false,
paging: false,
ordering: false
});
$("#group-assignment-table").DataTable({
scrollY: "9em",
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
info: false,
order: [[2, "asc"]]
});
});
[/code]

HTML:
[code]
<!DOCTYPE html>

DataTables - JS Bin

Groups

All fields

Fields

Field 1

Group ID

Group name

Group title

Type
Name

1
Field
WIN_NBR

[/code]

allan · April 2014

Can you link to a test page showing the issue please? Unfortunately the debugger doesn't really give us the information needed for styling issues such as this.

Allan

ashipma · April 2014

I wish I could, but this is on an intranet at the company for which I work and it is not accessible externally. The CSS, JavaScript, and HTML snippets above allow me to replicate the issue in the live.datatables.net site, but I am still unable to log in to or register for that site, so I cannot post a link to the JS Bin.

But if you copy and paste those sections into the live.datatables.net site, and then you try to expand and then shrink the output panel, it will at first expand like it is supposed to, but then it will not shrink when you shrink the width of the panel.

I was able to post those snippets to JS Bin. (http://jsbin.com/pozob/1/embed?html,output) If you stretch the width of the output panel, the width of the tables expand correctly. However, if you then shrink the width of the panel, the table width does not shrink, so the table never gets narrower even if the browser gets narrower.

I am using Internet Explorer 8.0.6001.18702CO and Chrome 32.0.1700.76 m to test this application, and both browsers exhibit the same behavior.

Please let me know if there is anything that you need from me.

Thank you for your help,
Alex

allan · April 2014

Thank you for the test case - yes I see the issue as well with your JSBin example.

If you disable scrolling on the final table it actually works as expected: http://jsbin.com/pozob/1/embed?html,output .

I think there is something in the layout which is keeping the table at the same width, but I'm not entirely sure what. I'll try to make some time in the next few days to look at it if I can, but until then, disable scrolling.

Allan

ashipma · April 2014

Awesome. Thanks so much for your help. As you pointed out, if I remove the "scrollY" property, then the width of the table will shrink and expand as expected.

Thanks again,
Alex

ashipma · April 2014

What is the best way to make the table be a maximum height if I cannot use the scrollY property? I still want the table to be able to stretch side-to-side, but also if the table has a bunch of rows in it, I want the table to start to scroll after it gets to a certain height.

Thanks for your help,
Alex

allan · April 2014

scrollY is the way to do a maximum height and have it scroll if larger. The only other option is to put it in a container which itself is scrolling.

I need to look at this, but haven't had the time to do so yet and likely won't this week.

Allan

Table width will not shrink

Table width will not shrink

Replies

Howdy, Stranger!

Categories

DataTables

Table width will not shrink

Table width will not shrink

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables