How to set max row height with scrollbar?

tablo

Hi all,

I can't figure out how to set max height of row height in DT and with a scrollbar when text is over this max height.

I've tried several things found in the docs and in posts such as:

https://datatables.net/extensions/fixedcolumns/examples/initialisation/css_size.html

https://datatables.net/reference/option/scroller.rowHeight

https://datatables.net/forums/discussion/8320/trouble-with-sscrolly

https://datatables.net/forums/discussion/43272/how-to-make-the-height-of-rows-fixed

https://datatables.net/forums/discussion/27252/max-row-th-td-height-in-responsive-table

https://datatables.net/forums/discussion/29116/row-height

but none of those has helped.

My settings as of now look like this:

var table = $("#example").DataTable({
    scrollY: 1000,
    scroller: {
        rowHeight: 1000
    },
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    columnDefs: [
        {width: '20%', targets: 0}
    ],
    fixedColumns: {
        heightMatch: 'auto'
    },
    dom: "Bfrtip",

and in the CSS:

td {
    font-size: 12px;
    max-width: 0;
    overflow: auto;
    white-space: nowrap;
    border: 1px solid red;
}

With these settings the whole table has a scrollbar. The columns are fixed and the cells have a horizontal scrollbar.
How can I set the max row height with vertical scrollbars?
Any ideas?

sandy

Hi tablo,

Are you trying to get a scroll bar to show in a cell when the text is too large?

If so have a look at this test case, editing the css code you provided slightly.

If this isn't what you want then could you please provide your own test case so we can help you further. This can be done here

Hope this helps,

Sandy

tablo

Hi @sandy ,

Thanks for the response!

Are you trying to get a scroll bar to show in a cell when the text is too large?

No. The text is around 12px. The example is good. This is what I mean, but with normal text size, not 200px text. It's just that the text inside the cell is sometimes too long, often in form of list items.

If this isn't what you want then could you please provide your own test case so we can help you further.

Sure. Here one cell with multiple lines in it. There is no vertical scrollbar.
Interestingly enough, in Firefox there are not even horizontal scrollbars. Text from one cell is colliding with text from the neighbor cell. In Chrome and Vivaldi there are at least horizontal scrollbars.

sandy

Hi @tablo,

I've modified the test case. See now that "Anglelica Ramos" Appears three times over multiple lines. Do you want a scrollbar to appear in that cell now?

If not please edit the test case to replicate the issue.

Thanks,

Sandy

tablo

Hi @sandy ,

I've modified the test case (Sorry, I've pressed "lock bin" and I couldn't find an option to undo, so I created a clone). I would like to appear a vertical scrollbar after 10 lines of text. Namely now.

live.datatables.net/rihifago/1/

sandy

Hi @tablo,

No worries about locking the bin a clone works just fine.

By using a render function and targeting all of the columns you can achieve this. Also editing the CSS to have a max-height of '10em'. I've updated the test case.

Hope this helps,

Sandy

tablo

Hi @sandy,

Great! Many thanks! That solved my issue! I had to make a small change because for some columns I had already a render function. So, I did this:

{
data: myCol,
render: function(data,type,full) {
...
var ol = "<div class = \"scrollingCell\"><ol>" + lis + "</ol></div>";
return ol
}
}

and now it's fine.