aScrollY and column header

brisko

Hello,
I am setting the column header width in CSS of th element, and the records width with element. that works fine until I enable aScrollY. the rows still have the width but the headers get messed up and they loose the width i set in CSS. I have 2 columns, I need the first to be set to 90% and the second to 10%.
Can anyone help me with this or point me to a thread if this was already discussed?

Thank you,

iuliandum

You have to set

brisko

this one is set..
what's happening is that when aScrollY is enabled, dataTable is creating two tables, one for the header, and the other for the table data. all the styles I set for the table, are for the latter.
something else, when I use the pagination buttons (first, next, last, previous), the header takes 100% width, but each column has 50% and not 90/10 like I want it to be.

iuliandum

You have to use Data Tables 1.7 beta 2, because beta 1 has this bug.

Download 1.7 beta directly: http://datatables.net/releases/dataTables-1.7.beta.2.zip

When I use beta 1 I obtained this

http://i.imgur.com/xOHwZ.jpg

is same as obtained you?

brisko

iuliandum,
thanks for replying
Am using 1.7 beta2, and here's a screenshot of the issue if it helps.
http://imgur.com/1f2X7.png

iuliandum

Set column width with "sWidth": "20%", not with CSS, and for first column I think 10% is too little.

At me everything is going well.

brisko

and here's how the table is initialized:
[code]
table = $('#rounds-table').dataTable({
aLengthMenu: [3,10,25,50],
iDisplayLength: 10,
"sPaginationType" : "full_numbers",
sScrollY: "160px",
"aoColumns": [{ "sWidth": "80%" }, { "bSearchable": false, "sWidth": "20%" }],
bSort: false
});
[/code]
The problem is happening only on initialization, now when I use the pagination controls or I change the number of records into view, it works fine.

iuliandum

Try "sWidth": "60%" and "sWidth": "40%" for "aoColumns" and

brisko

Here are two screenshots comparing the dom of both the scroll demo that comes with dataTables, and my page using firebug extension.
In my case, the problem is with the dataTables_scrollHeadInner class which is getting a 17px width (the scroll bar's width), and its child table is getting 0 width.
http://imgur.com/70a55.png
http://imgur.com/hrVMR.png
Now what am doing is setting their widths to 100% after the creation of the table:
[code]
$('.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table').attr('style', 'width:100%');
[/code]
it does the job with little design issues, but I'd like to know if there's a native solution to this issue.
Thank you

allan

Hmmm - something looks very wrong there... Is it possible for you to send me the HTML you are using for your table? Or even better, send me a link to see it in action? http://datatables.net/contact .

Regards,
Allan

brisko

Hello Allan,
I'll try to reproduce the behavior in a html page since the screenshots I sent are part of a more complex Zend Framework solution. But just so that you know, the grid is inside a jQuery tab which is inside an instance of a jquery layout (I use 3 nested layouts). I am not sure if this may give you some hints.

Regards,