how to know the height of a cell ?

jss6

I put in place in 3 clonne of my table, a system which makes it possible to truncate the text by clicking on links 'read more' or 'read less'.
This system works fine except that I would like the text to be truncated only if necessary.
So for that I must know the initial height of the cell, if this height is greater than X then I display the links.
My problem is that I can not manage to recover the height of the cell. ClentHeight always shows me 0.
Can you help me ?

Thanks

this is my code:

var table = $('#table_RI').DataTable( {
        data: dataSet,
        searching: true,
        paging: false,
        order: [[ 0, 'desc' ],[ 9, 'desc' ]],
        dom: '<"wrapper"ftip>',
        oLanguage: {
            "sSearch": "Search<br>release:"
        },
        autoWidth: false,
        columnDefs: [
            {"targets": 0 },
            { "title": "Reference IR", "targets": 1 },
            { "title": "Issue", "targets": 2 ,"orderable": false},
            { "title": "Abstract","targets": 3,"orderable": false},
            { "title": "status", "targets": 4 },
            { "title": "1st Transaction", "targets": 5,"orderable": false },
            { "title": "Program", "targets": 6,"orderable": false },
            { "title": "owner", "targets": 7,"orderable": false},
            { "title": "Brand", "targets": 8,"orderable": false },
            { "title": "Create date", "targets": 9 },
            { "title": "Target date", "targets": 10, "orderable": false },
            { "title": "Transactions impacted", "targets": 11,"orderable": false},
            {
            targets: [2,3,11],
            createdCell: function(cell) {
                var $cell = $(cell);

                console.log($(cell)[0].clientHeight);
                if($(cell)[0].clientHeight > 73){

                    $(cell).contents().wrapAll("<div class='content'></div>");
                    var $content = $cell.find(".content");

                    $(cell).append($("<p class='readMoretxt' >Read more</p>"));
                        
                    
                    $btn = $(cell).find("p");
                        
                    $content.css({
                        "height": "30px",
                         "overflow": "hidden"
                    });
                    $cell.data("isLess", true);

                    $btn.click(function() {
                        var isLess = $cell.data("isLess");
                        $content.css("height", isLess ? "auto" : "30px")
                        $(this).text(isLess ? "Read less" : "Read more")
                        $cell.data("isLess", !isLess)
                     })
                }
            }
        }]
    });

    $('#table_RI_filter input').on( 'keyup', function () {
    table
        .columns( 0 )
        .search( this.value )
        .draw();
    });

    table.columns.adjust().draw();

colin

Hi @jss6 ,

Maybe try jQuery's height() method.

Cheers,

Colin

jss6

Hello,
I tried this console.log ($ (cell) [0] .height ()) but it does not work, I have an error TypeError: $ (...) [0] .height is not a function
Thank you

colin

Hi @jss6 ,

Yep, you need $(cell).height(), see here.

Cheers,

Colin

tefdat

Hi,
I struggled over this too. Was a long run, but found a appropriate solution.

I guess, if responsive is selected (e.g. css flex) the height is not defined respectively 0px. In the browser debugger you see the real value - in $(cell)[0].clientHeight. But createdCell is pulling this value before the cell is fully created.

Following workaround works well for me - even with responsive tables; i am checking the amount of linebreakes; this not precise as height, but much better than (some of my ultralong) cells
Live Demo