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

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

DystDyst Posts: 8Questions: 3Answers: 0

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,

};

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • DystDyst Posts: 8Questions: 3Answers: 0
    edited May 23

    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. :smile:

    Here is a preview in Chrome:

    and here is the preview in Edge:

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943
    Answer ✓

    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

  • DystDyst Posts: 8Questions: 3Answers: 0

    Thank you! That fixed the problem. :smiley:

Sign In or Register to comment.