Row & Header Issues

jcrawford

Hello Allan,

I found that one of my tables is behaving a bit odd. If I make my browser NOT be full screen and reload my page the table looks fine.

http://i427.photobucket.com/albums/pp358/codebowl/Website%20Issues/ScreenShot2011-12-14at43658PM.png

However if I then make the browser full screen the rows do not get wider like the header and footer does.

http://i427.photobucket.com/albums/pp358/codebowl/Website%20Issues/ScreenShot2011-12-14at43707PM.png

Thoughts on what I might be doing wrong with this table? Other tables I have in place seem to work just fine.

jcrawford

it appears that DataTables actually puts a wrapper container around my table and then set the width on the rows somehow, not sure how or why but this is why it is caused.

[code]

















[/code]

notice the style="width: 922px;" in the table tag?

The odd part is I set the style="width: 100%" on the table, here is my html code

[code]



ID
Code
Limit
Total Redeemed
Expiration Date




Loading data from server



[/code]

I checked the table that works fine and it has the same HTML table tag except the ID is different. If I inspect the element on the table that works it's width is set to 100% and not 922px. What could be causing this?

This is the generated source for the "WORKING" table so that you can see it is outputting 100% and not 922px.

[code]

[/code]

allan

Try calling http://datatables.net/api#fnAdjustColumnSizing on the resize event for the window.

The reason DataTables adds the width to the table is that it must assign a width to stop it bouncing around in size when paging - also there isn't a way (as far as I know) that I can find out that the table has width:100% applied to it, since $().css('width'), $().width(), offsetWidth and all the other methods for getting the width give it back in pixels - hence the problem.

Ideally there would be a way of doing this, and the problem would "go away" :-)

Allan

allan

I've just committed a change in how the width is handled to the 1.9 development branch (beta later today I hope). If the width attribute is found on the table element, then that is used as the table width. So what to do if you want a 100% width table is to simply add 'width="100%"' to your table tag. Makes a relative sized table much easier!

Regards,
Allan

jcrawford

Are you suggesting I attempt to use the 1.9 beta code to resolve the issue?

I currently have the table width set to 100% but for some reason it is setting the width to 922px on one particular table. Other tables seem to work fine with the 100% width and the table is actually set at 100% width as shown above in my code samples.

jcrawford

Allan,

I have attempted to put that code in place with the following

[code]
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
} );
[/code]

When I resize my window it does not appear to have helped because I still get what looks like this.

http://i427.photobucket.com/albums/pp358/codebowl/Website%20Issues/ScreenShot2011-12-15at81014AM.png

If I check the HTML now the size is different for the table

[code]

[/code]

What throws me off is I have the table defined with the following

[code]

[/code]

jcrawford

Allan,

I should also note that when I do resize the window the Processing stuff shows on my table and refuses to go away, here is a screen shot showing what I mean.

http://i427.photobucket.com/albums/pp358/codebowl/Website%20Issues/ScreenShot2011-12-15at82003AM.png

allan

Try the 1.9 beta that is now available and put width="100%" on your table.

> I should also note that when I do resize the window the Processing stuff shows on my table and refuses to go away, here is a screen shot showing what I mean.

This is cause by a Javascript error. What does the Firebug console say.

Allan