Limit Text- Show more

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

Here’s a solution you can use to limit the number of characters text inside a table component and have “Show More” and “Show Less” options.

Step 1

Find the component ID of the table you are applying this to.

Step 2

Add the following code to the JavaScript of the page.

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);
});

Original Community Post:

https://community.tadabase.io/t/limit-text-length-in-table/483/4