Table responsive overflow using Bootstrap 3 and ajax pagination

[peyobr]

Hi,

everything seems perfect...

but switching pages via ajax in a 8" tablet overflow always happens when some cell contains more text than as usual.

Already tried all doc examples... any ideas?

Thank you!!

My HTML follows:

<div class="content-wrapper col-sm-12">
    <div class="table">
        <table class="table table-striped" width="100%" id="ulogs-table">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Tipo</th>
                    <th>Utente</th>
                    <th>Action</th>
                    <th>Ip</th>
                    <th>Method</th>
                    <th>Url</th>
                    <th>Info</th>
                    <th>Log</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#ulogs-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ url("ws/ulogs") }}',
            order: [ [0, "desc"] ],
            lengthMenu: [ [10, 25, 50, 100], [10, 25, 50, 100] ],
            pagingType: "full_numbers",
            searchHighlight: true,
            responsive: true,
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.7/i18n/Italian.json"
            },
            search: {
                caseInsensitive: true
            },
            columnDefs: [{
                render: function(data, type, row){
                    return "<abbr title='" + data + "'><p class='text-capitalize'>" + data.replace(/.*@/, "") + "</p></abbr>";
                },
                targets: 3
            },{
                type: "ip-address",
                targets: 4
            },{
                render: function(data, type, row){
                    return "<abbr title='" + data + "'><span class='fa fa-expand'></span></abbr>";
                },
                targets: 6
            },{
                render: function(data, type, row){
                    return JSON.stringify(data, null, 1);
                },
                targets: 7
            }]
        });
    });
</script>

[DataTables]

Can you link to a test page showing the issue please.

[peyobr]

Hi, please give me some time to make a demo test page showing the issue.

At this moment the feature is in a production environment and i need to seed dummy test data for that purpose.

Thank you in advance.

[DataTables]

No problem - thanks for looking into it!

[peyobr]

I'm start thinking that no issue actually exists...

I'm dealing with very long base64 encoded sha512 hash data log strings, maybe datatables is forced to wrap these "unbreakable" lines... then the resulting overflow...

I'm start thinking that the only solution would be manually force class control...

[DataTables]

Sorry for the massive delay in replying here. I've committed a number of changes that might help - but there is also the ellipsis display renderer that you might find use if you want to truncate long strings.

Going to close for now. If this is still an issue, please reopen with a link to a test case.