How to set max row height with scrollbar?

How to set max row height with scrollbar?

tablotablo Posts: 58Questions: 13Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • tablotablo Posts: 58Questions: 13Answers: 0

    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.

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • tablotablo Posts: 58Questions: 13Answers: 0

    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/

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    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

  • tablotablo Posts: 58Questions: 13Answers: 0

    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.

This discussion has been closed.