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?
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
scrollXis 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
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:
I might be wrong but I don't think that is a Datatables scroll bar. Maybe try adding
style="width:100%"to thetabletag 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
Thank you! That fixed the problem.