Datatable centering on screen

jose.gomez

Hello,

Suddenly my table is being aligned centered in the page. Doing this is moving a left-sidebar far to the left and it's not visible anymore. The table is very big (around 5000px) and previously to that it was being correctly displayed in the container at the right of the screen (the container and the parent of the container uses flexbox).

I tried by taking out the datatables CSS, but it doesn't work as it seems it's something is being done in the javascript when loading the table. Do you have any idea of what can be doing this centering in the screen? I know I can use the position:relative and a left:xxx px, but I want to understand what's happening here to fix it in the correct way.

I've been using the inspector for hours looking for the answer, but I'm not able to find what makes the table being centered in the screen. I also looked back to my saved copy, but there are no significant differences like to do this change...

In case of needed, I'm writing here the code of the table in html and js:

HTML code:

>table id="tramosTable" class="display stripe hover compact" cellspacing="0" width="100%"<
        >thead<
            >tr<
                >th<Provincia>/th<
                >th<Pk>/th<
                >th<Id tramo>/th<
                  ...more to 25...
            >/tr<
        >/thead<
        >tfoot<
            >tr<
                >th<Provincia>/th<
                >th<Pk>/th<
                >th<Id tramo>/th<
                  ...more to 25...
            >/tr<
        >/tfoot<
    >/table<

JS code:

    var data_columns = [
            { 'data': 'provincia' },
            { 'data': 'pk' },
            { 'data': 'id_tramo' },
               ...more to 25...
         ];

    var table = $('#tramosTable').DataTable( {
        "data":           tableData,
        "dataSrc":        "",
        "deferRender":    true,
        "columns":        data_columns,
        "pageLength":     25,
    } );

I very appreciate your advice.

Thank you.

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

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

jose.gomez

Thank you Alan. It's very difficult to put my code in a test as is a very complicated page.

Anyway, I've been able to fix this using the property 'overflow-x: auto' in the container of the table.

I don't know what caused this, but I have fixed it. Maybe this is useful for somebody. Next time I'll try to follow correctly the rules.

Thank you!