What is the best way to set these columns so that the styling looks correct?

jschroeder7

Hello all,

What might be the best way to set these columns so that the styling looks correct? I have a lot of columns, so when I am toggling on all the columns, this can be definitely problematic, the picture with the 2 yellow outlines shows what I am talking about. "wisdom and instruction" is one "tag" so to speak, if I tagged it as "wisdom", "and", "instruction" that doesn't seem to be a problem as you can see with my test 1 2 3 tags. Thanks for any input on this.

kthorngren

Sorry I'm not understanding what styling you are looking for. Please provide simple test case with an example of what you have and tell use what changes you need.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rf1234

If your table is responsive you need to make sure that no line break is done and the column is automtically made wider.

In this code I want one line fore each combination of category_name and value. I just use white-space:nowrap. You could also use non breaking spaces but for my purposes the following solution was easier:

{   data: "ctr_category",
    render: function ( data, type, row ) {
        var ix=0;
        var returnString = '';
        while (row.ctr_category[ix]) {
            if (ix !== 0) {
                returnString += ',<br>';
            }
            returnString +=
                ( row.ctr_category[ix].category_name + ': ' +
                  row.ctr_category[ix].value );
            ix++;       
        }
        if (returnString <= '') {
            return lang === 'de' ? '<p class="text-danger-plus">Bitte mindestens \n\
                   eine Kategorie auswählen.</p>' : '<p class="text-danger-plus">\n\
                   Please select at least one catgegory.</p>';
        }
        return '<span style="white-space:nowrap">' + returnString + "</span>";
    },
    orderable: orderable
},

This one is a little more sophisticated. In this case I want the column to be at least 40 characters wide if "ctr_name" is longer than 40 chars. Hence I replace white space with nbs in the first 40 chars substring and call it "namePartlyNBS"

{   data: "ctr.ctr_name",
    render: function ( data, type, row ) {
        var namePartlyNBS = data.substr(0,40).replace(/ /g, ' ') + data.substr(40);
        var str = renderPurpose(row.ctr.serial, row.ctr.purpose, namePartlyNBS);
        if ( row.ctr.is_draft > 0 ) {
            var draft = lang === 'de' ? '[Entwurf]' : '[Draft]';
            str += '<br><span class="text-primary">' + draft + '</span>';
        }
        if ( row.ctr.soft_deleted > 0 ) { 
            var del = lang === 'de' ? '[Gelöscht]' : '[Deleted]';
            str += '<br><span class="text-danger-plus">' + del + '</span>';
        } else if ( row.ctr.expired > 0 ) {
            if ( filterExpirations(-1, row.ctr.end_date ) ) {
                var exp = lang === 'de' ? 
                    '[Wurde endgültig beendet am ' + row.ctr.end_date + ']' : 
                    '[Was finally ended on ' + row.ctr.end_date + ']';
            } else {
                var exp = lang === 'de' ? 
                    '[Wird endgültig beendet per ' + row.ctr.end_date + ']' : 
                    '[Will be finally ended on ' + row.ctr.end_date + ']';
            }
            str += '<br><span class="text-danger-plus">' + exp + '</span>';
        }
        return str;
    }
},

rf1234

I am not sure whether I understood your question correctly. I was just guessing. So Kevin's question is absolutely legitimate