Large Column

mike3

Hi,

First thanks for all the good work on dataTables.

I'm facing a simple problem, but I couldn't find the proper solution in the Forum or in the examples.

One of my column is very large, and should be on several lines to makes sure that the table does not "overflow" outside of the screen. That is, the text inside the column should wrap to a new line when the maximum width of the column is reached.

I tried to use a width parameter on the tag but that does not seem to help. The table overflows outside of the screen, and the text does not wrap.

I set up a minimalist example here:
http://tinyurl.com/24nqx67

I used the default ThemeRoller theme that come with the latest distribution.

Any idea would be appreciated.
Thanks!

allan

Hi mike3,

The problem here is that the web-browser cannot break the text onto multiple lines, since there is no where (white space) for it to put a break into. As such it just renders it as one big long string - and hence the table expands to create the "effect" that you see.

This post ( http://datatables.net/forums/comments.php?DiscussionID=1711 ) talks about this problem as well. If you are using PHP then you could use the wordwrap() function suggested in that thread, or using any other server-side programming language you could do a split. You could even use fnRender() to do that...

If splitting the text up isn't an option, then the new scrolling feature in the 1.7 beta series might be suitable: http://datatables.net/beta/1.7/examples/basic_init/scroll_x.html . Note there are a few known issues with scrolling and the beta - but it should work in most cases...

Regards,
Allan

mike3

Allan,

I tried using sScrollX as you suggested, unfortunately the table headers and the row columns are not in sync any longer:
http://tinyurl.com/27bvtos

(The cell of the first column is now under several table headers)

Is this a bug with 1.7 Beta ?

[code]
$(document).ready(function() {
oTable = $('#example').dataTable({
"sScrollX": "100%",
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
[/code]

Thanks.

allan

Hi mike3,

Yes - most certainly a bug... Are you using 1.7 beta 2 (there are a number of fixes in there for that kind of thing). There are still a few issues with the scrolling and lining up of columns - which I hope to fix in the next beta, but it's proving hard to get a full set of test cases together which fail consistently. This would be a good one if it is beta 2 you are using!

Allan

mike3

Allan,

I removed the existing install, and I installed the latest 1.7 beta 2.

The first column still does not line up with the row. The first cell is crossing over into the second column.
http://tinyurl.com/27bvtos

allan

Hi mike3,

One final check - did you clear your browser cache? Just to make sure that beta 2 was loaded...

Could you possibly post the HTML you are using for the table (just to save me a few minutes :-) ) - that will make it easy for me to reproduce exactly what you are seeing.

Thanks,
Allan

mike3

It's reproducible after a cleaning the cache on Chrome, IE, and Firefox

The code for the table is the same that when looking at the source html. Here it is for reference:

[code]




Long


AB CD


AB CD


AB CD


AB CD


AB CD


AB CD


ABCD


ABCD


ABCD


ABCD


ABCD


ABC


ABCD


ABCD


ABCD


ABCD


ABCD


ABCD


ABCD






LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong


0.85


102


0


-


-


0


0


-


8


1


11


8


6


0


2


2


0


1







[/code]

Regards.

mike3

(removing the width parameter does not seem to remove the problem)

allan

heh - sorry. I thought that was an image before... Perfect - thanks for the code. It will be addressed in the next beta!

Allan