Scroll X: false is not working on Microsoft Edge. Is this specific to Edge?

Dyst

Here is my code.

$(document).ready(function () {
    agreementTable = $('#agreementDetailsTable').DataTable(agreementDetailsOption);
});

agreementDetailsOption = {
    layout: {
        topStart: 'search',
        topEnd: null,
        bottomStart: null,
    },
    columns: [
        { className: 'dt-control', orderable: false, data: null, defaultContent: '' },
        { data: null }, // Order
        { data: null }, // Image Position
        {
            data: null,
            defaultContent: '<a class="btn btn-primary edit-btn">Edit</a>',
            orderable: false
        },
        {
            data: null,
            defaultContent: '<button class="btn btn-danger view-changes-btn" type="button">Delete</button>',
            orderable: false
        },
    ],
    paging: false,
    scrollCollapse: true,
    scrollY: '50vh',
    scrollX: false,

};

allan

scrollX is false by default. If you moreve it does it make any difference?

It sounds like the content of the table might be forcing horizontal scrolling because it is too wide for the view port? You could try using Responsive perhaps?

Allan

Dyst

Good day,

I apologize, I should have given you more context about the problem. For some reason, the vertical scrollbar keeps appearing on Edge even after I tweak it with CSS. But, when I try the same code on Chrome, the scrollbar disappears.

Additionally, I am using Bootstrap 3, and the DataTable is inside a col-md-6 div.

And yes, I have already tried using responsive.

Here is a preview in Chrome:

and here is the preview in Edge:

kthorngren

I might be wrong but I don't think that is a Datatables scroll bar. Maybe try adding style="width:100%" to the table tag as described in this example.

Is the table hidden when Datatables is initialized? If so use columns.adjust() when the table is becomes visible as shown in this example.

Kevin

Dyst

Thank you! That fixed the problem.