claudios claudios - 5 months ago 26
jQuery Question

Prevent text to overrun inside modal

I have an issue regarding about modal when a table data contain huge texts it will overrun outside. I also used datatables from here.

See Image below:

enter image description here

I know I can move the long text to new ling by using

word-wrap:break-word;
but how can I add the class? Also Is there a way I can change the modal size?

Code that displays the modal:

responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data = row.data();
return 'Details for '+data['first_name']+' '+data['last_name'];
}
} ),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}


fiddle here

Answer

Try this

.modal-body table
{
  table-layout: fixed;
}

.modal-body table td
{
  word-wrap:break-word
}

UPDATED

I add class called myDetailClass

$(document).ready(function() {
$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for '+data[0]+' '+data[1];
                }
            } ),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                tableClass: 'table myDetailClass'
            } )
        }
    }
    } );
} );

then

.myDetailClass
{
  table-layout: fixed;
  word-wrap:break-word;
}

You can also make custom model. Detail is here