Prevent word wrapping, is it possible?

burnettm

Is it possible to setup DataTables to behave similar to a table in most OSes, where the cell's data will not have word wrapping?

burnettm

I should have searched first, setting white-space: nowrap; worked.

allan

That's it :-).

An extension to that is to have a DIV in the cell with `overflow:hidden; white-space: nowrap; text-overflow: ellipsis;` so show that the value has been truncated, if you need to show text in a small space. I often do that with a tooltip to show the full text if I need such a display.

Allan

burnettm

Thanks! How exactly would I add that DIV to a cell? Also I found out that I cant resize the columns (via ColReorderWithResize) if I use white-space: nowrap

burnettm

So I figured out how to wrap the contents of the TDs in to a DIV but it still isnt working. Each row is single line, but the rows go off the screen, rather than hiding the overflow. Could you tell me what i'm doing wrong?

$("#logTable").dataTable({
"sDom": "Rlfrtip",
"aoColumns": [
{"sTitle": "Module", "bSortable":false, "sWidth":"25%"},
{"sTitle": "Severity", "bSortable":false, "sWidth":"25%"},
{"sTitle": "Message", "bSortable":false, "sWidth":"25%"},
{"sTitle": "Date", "bSortable":false, "sWidth":"25%"}
],
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
var tableRowData = $(nRow).children("td");

for(var i = 0; i < tableRowData.length; i++)
{
$(tableRowData[i]).wrapInner("");
$(tableRowData[i]).children("div").css("overflow", "hidden");
$(tableRowData[i]).children("div").css("white-space", "nowrap");
$(tableRowData[i]).children("div").css("text-overflow", "ellipsis");
}
}
});

burnettm

Well, it kind of works initially if add
$(tableRowData[i]).children("div").css("max-width", $($("#logTable").find("th")[i]).css("width"));

I also need to find a way to update max-width when I resize the column or table. Is this the proper way to do this, or am I making things more difficult than they need to be?

allan

Third row here has the wrapping: http://live.datatables.net/obaceb/2/edit

However, it doesn't resize dynamically - you'd need a bit of Javascript a bit like what you've got. I think at some point DataTables may need an optional extra to do that wrapping automatically - and it more certainly will when I get the time to write a supported column resizing plug-in. The other option is to use `table-layout: fixed` - which should work will with ColReorderWithResize (although I've not tried it!).

Allan

burnettm

Thanks Allan.

Well i've decided to abandon ColReorderWithResize and instead use JQuery's resizable, because I dont care about reordering. It works most of the time, but sometimes it gets stuck and I cant make the resized column smaller, I'm not sure why yet. Also I'm not sure if there is a better way to do this, if anyone has any tips please let me know what I'm doing wrong. In case anyone else is interested, here is my code.

[code]
$("#logTable").dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bSort":false,
"aoColumns": [
{"sTitle": "Module", "bSortable":false},
{"sTitle": "Severity", "bSortable":false},
{"sTitle": "Message", "bSortable":false},
{"sTitle": "Date", "bSortable":false}
],
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
var tableRowData = $(nRow).children("td");
var tableHeaderRows = $("#logTable").find("th");

for(var i = 0; i < tableRowData.length; i++)
{
$(tableRowData[i]).wrapInner("");
$(tableRowData[i]).children("div").css("overflow", "hidden");
$(tableRowData[i]).children("div").css("white-space", "nowrap");
$(tableRowData[i]).children("div").css("text-overflow", "ellipsis");
$(tableRowData[i]).children("div").css("max-width", ($(tableHeaderRows[i]).css("width").replace("px", "") - 10) + "px");
}
},
});
$("#logTable").find("th").resizable();
$("#logTable").find("th").bind('mouseup', columnResizeUp);
$("#logTable").find("th").bind('mousemove', columnResizeMove);
$("#logTable").find("th").bind('mousedown', columnResizeDown);

...

var resizingColumns = false;

function columnResizeDown(event)
{
resizingColumns = true;
}

function columnResizeUp(event)
{
resizingColumns = false;
}

function columnResizeMove(event)
{
if(resizingColumns === true)
{
var table = $(event.currentTarget).parent().parent().parent();
var tableRows = table.find("tr");
var tableHeaderRows = table.find("th");

for(var i = 0; i < tableRows.length; i++)
{
var tableRowData = $(tableRows[i]).children("td");

for(var ii = 0; ii < tableRowData.length; ii++)
$(tableRowData[ii]).children("div").css("max-width", ($(tableHeaderRows[ii]).css("width").replace("px","") - 10) + "px");
}
}
}
[/code]

burnettm

Well I assume it is getting stuck is because somehow the header row's CSS width somehow becoming 10px when its actual width is much larger. Anyone have any idea how this is happening?
http://img689.imageshack.us/img689/9103/27441451.jpg

allan

The image will be getting loaded after you've initialised the table - so it was 10px (empty image) at that time, and no longer is. Try calling fnAdjustColumnSizing after the images have loaded perhaps?

Allan

burnettm

Well I resolved this issue by abandoning JQuery's Resizable, not using max-width, not wrapping the contents of TDs in DIVs, removing my mouse binds, and transitioning to colResizable (http://quocity.com/colresizable/) which is working perfectly. JQuery's Resiable would resize columns unpredictably, and colResizable works just like a table is any OS.

[code]
$("#logTable").dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bSort": false,
"aoColumns": columns,
"bAutoWidth": false,
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$(nRow).children("td").css("overflow", "hidden");
$(nRow).children("td").css("white-space", "nowrap");
$(nRow).children("td").css("text-overflow", "ellipsis");
},
});

...
add table data
...

$("#logTable").colResizable({
liveDrag:true,
draggingClass:"dragging"});
[/code]