Limit text length in table

[Chem]

Here’s another solution you can use if you wanted to be able to limit the number of characters text inside a table component and have a “Show More” and “Show Less” option.

Here’s how that would look.

The first thing you’ll need to do is find the component ID of the table you are applying this to.

Then I added the following code to the JavaScript of the page.

Remember to change component_id to your tables component id

JavaScript

function showMore(id) {
    document.getElementById(id + 'Overflow').className = '';
    document.getElementById(id + 'MoreLink').className = 'hidden';
    document.getElementById(id + 'LessLink').className = '';
}
function showLess(id) {
    document.getElementById(id + 'Overflow').className = 'hidden';
    document.getElementById(id + 'MoreLink').className = '';
    document.getElementById(id + 'LessLink').className = 'hidden';
}

var trun = function(){
    if(!$('.shrinkables').length){
        var len = 60;
        var shrinkables = $('tbody td span');
        if (shrinkables.length > 0) {
            for (var i = 0; i < shrinkables.length; i++) {
                var fullText = shrinkables[i].innerHTML;
                if (fullText.length > len && !$(shrinkables[i].offsetParent).hasClass('allow-inline-edit')) {
                    var trunc = fullText.substring(0, len).replace(/\w+$/, '');
                    var remainder = "";
                    var id = 'shrinkable' + i;
                    remainder = fullText.substring(len, fullText.length);
                    shrinkables[i].innerHTML = '<span class="shrinkables">' + trunc + '<span class="hidden" id="' + id + 'Overflow">' + remainder + '</span></span>&nbsp;<a id="' + id + 'MoreLink" style="cursor:pointer;" onclick="showMore(\'' + id + '\');">Show More</a><a class="hidden" style="cursor:pointer;" id="' + id + 'LessLink" onclick="showLess(\'' + id + '\');">Show Less</a>';
    
                }
            }
        }
    }
};

TB.render('component_id',function(){
    trun();
});
$('body, button').click(function(){
    setTimeout(function(){
        if($('.shrinkables').length === 0){
             trun();
        }
    },500);
});