No show ScrollX with ServerSide

isalazarcalle

Hello,

I've been searching and trying several things on the internet to be able to show the horizontal scroll, but I can't get it.

I'm creating my DataTable control:

var columns = [
        {
            data: 'id',
            visible: false
        },
        {
            data: 'numValidaciones',
            title: "Val.",
            //width: '1%',
            className: "center",
            orderable: false
        },
        {
            data: 'registro',
            title: "Reg.",
            //width: '1%',
            render: function (data) {
                if (data !== undefined && data !== null) {
                    return data;
                }
                return '';
            }
        },
        {
            data: 'fechaRegistro',
            title: "F.Registro",
            //width: '3%'
        },
        { data: 'numeroFactura', title: "Nº Fac", },
        {
            data: 'direccion',
            title: "Dirección",
            //width: '5%',
            render: function (data) {
                if (data !== undefined && data !== null) {
                    return data;
                }
                return '';
            }
        },
        { data: 'nombre', title: "Nombre", },
        { data: 'promocion', title: "Promocion" },
        {
            data: 'total',
            title: "Total",
            //width: '5%',
            render: function (data) {
                if (data !== undefined && data !== null) {
                    return Globalize.format(data, 'C2');
                }
                return '';
            }
        },        
        {
            data: 'tieneDocumentos',
            title: "Doc.",
            //width: '1%',
            className: "center",
            orderable: false,
            render: function (data) {
                if (data === 1) {
                    return '<i class="fa fa-check-circle fa-1x iconmenu facturas" data-toggle="ajax-modal" id="' + data.toString() + '"></i>';
                } else {
                    return '<i class="fa fa-exclamation-triangle fa-1x iconmenu registro" data-toggle="ajax-modal" id="' + data.toString() + '"></i>';
                }

            }
        },
        { data: 'tipo', title: "Tipo",  },
        {
            data: 'fechaFactura',
            title: "F.Factura",
            //width: '3%'
        },
        { data: 'descripcion', title: "Descripción",  },
    ];

$('#' + controlId)
        .on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
        })
        .DataTable({
           autoWidth: false,
            responsive: {
                details: false
            },
            scrollX: true,
            footer: true,
            processing: true,
            serverSide: true,
            stateSave: false,
            deferRender: true,
            destroy: true,
            info: options.showInfo, // hide showing entries
            ordering: true,
            paging: options.showPagination, //hide pagination
            searching: options.showFilter, //hide Search bar
            searching: options.showSearching,
            pagingType: "numbers",
            pageLength: options.pageLength,
            dom: 'B<"clear">frtip',
            order: options.columnsOrder,
            columns: columns,
            aoColumnDefs: options.columnsDefs,
            buttons: [],
            ajax: {...}
});

This is my HTML:

Why can't I see the ScrollX??

Thanks!

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Yep, that looks like it sould work. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

isalazarcalle

Hello @colin

I'm so sorry but the rules.
I thought that by putting some of the code I could be able to solve my problem.

I attach the case:
http://live.datatables.net/qexatoyo/1/edit

I have seen my proble is in this line:

But I don't understand the why.

Regards,

isalazarcalle

@colin I have seen the proble is in the "r-2.2.2" script.

But I don't understand why.

colin

The "r-2.2.2" refers to Responsive - if that's present, it wouldn't show the scroll as it would reduce the table.

isalazarcalle

Hello @colin .

In the end, I deleted that library and everything works properly.

Thanks for your attention.