Cell Content Horizontal Scroll without Scrollbar?

btBill

Hello,

Is it possible to have content scroll horizontally without a scrollbar?
What I am looking for is like in Excel when the col is too narrow and the content is long... it looks like it is truncated, but if you click in the cell and drag to the right, you will see the rest of the content.

Is something like this possible?

Thanks.

allan

Sort of... The approach I tend to take with this kind of thing is to use mRender as a function - like this:

[code]
{
"mData": "content",
"mRender": function ( d, type, row ) {
if ( ! d ) {
return '';
}
else if ( type === 'display' && d.length > 40 ) {
return ''+
d.substr( 0, 40 )+
'...';
}
return d;
}
},
[/code]

So an ellipsis is shown if it is > 40 characters. Its not perfect, since you have to include this code, but it will work across all browsers.

It doesn't have scrolling content - for that you would need to put the content into a div and size the div accordingly and set the overflow attributes.

The final option is to use table-layout:fixed. That isn't really supported with DataTables at the moment, but it would allow the use of text-overflow:ellipsis in browsers that support it (webkit - and possibly mozilla now).

Allan

btBill

I'm not sure this is what I'm looking for.
I see that anything over 40 chars would truncate and add the '...' (right, that's what this is doing?) BUT I would still have to have a div with scrolling overflow... wouldnt that then add scrollbars?

I already was able to add the scrollbars and overflow with css, but I dont want scrollbars at all.

If the data is too long, it should just continue hidden past the right edge until you click in the cell and drag to the right.

Scrollbars to slide sideways would take up too much room.

allan

I see - in that case, I don't think there is a plain and easy way of doing it in CSS. This is the Mozilla documentation for the overflow property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow - there doesn't appear to be an option for what you want and I don't recall having see one before e(webkit has a webkit specific option which would work, but not the other browsers).

What I have done in the past (although never in a table) is use a technique that that described here:
http://hynchrstn.wordpress.com/2012/06/10/hide-scrollbar-but-still-scrollable-using-css/

Basically have two elements - the inner one being too big for the container by exactly the scrollbar size, so the scrollbars are hidden.

Allan

btBill

So i can get this to work in jsfiddle, but then when my DT table loads, it still uses all the room it needs first before applying the inner and outer divs.

What I mean is: when I set the min-width and just test this in a basic html test, it works great. Squashes down to a min width. BUT when this is run within DT, the cell's content forces the col width to be as wide as it needs to be..then setting the width of the col to a specific pixel width.

Here's my css that's being added to the content of the table:

[code]
.outerLimiter {
min-width: 200px;
height: 36px;
overflow:hidden;
}

.innerScroll {
height: 56px;
min-width: 200px;
overflow: auto;
background: ivory;
overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}
[/code]


BUT.....

If I change these to 'max-width: 200px'; The table reduces correctly, but then the column is only ever that width. It doesnt get any bigger like it should.

Is there a 'Min Width' or 'starting width' to set on the columns?

Also, My alignment gets thrown off when the header is wider than the cells content.

allan

> then when my DT table loads, it still uses all the room it needs first before applying the inner and outer divs.

If you are using the default DataTables CSS then it has width:100% for the table tag in it, which might be messing things up?

> Is there a 'Min Width' or 'starting width' to set on the columns?

Possibly only if you were to use `table-layout: fixed` I think. There is no min width option in DataTables itself.

> Also, My alignment gets thrown off when the header is wider than the cells content.

Have you tried calling fnAdjustColumnSizing under those conditions?

Allan