ScrollX not applying horizontal scroll on mobile

ScrollX not applying horizontal scroll on mobile

jRadjRad Posts: 1Questions: 1Answers: 0

Link to CodePen.

What I'm trying to do is to add a horizontal scrollbar to the DataTables plugin on my site when on mobile.

I've added the CSS and adjusted the jQuery code to try and to this as per the docs:

CSS

div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}

JS

$(document).ready(function () {
  $("#used-equip-table").DataTable({
    pageLength: 50,
    "scrollX": true
  });
});

When I shrink the browser to a mobile viewport, it looks like it works perfectly. It adds the horizontal scrollbar, and the user on mobile can swipe through:

When shrinking browser to viewport

However if you open my codepen in the browser, it doesn't do that. Instead, it does this:

enter image description here

It looks completely different, and doesn't have the horizontal bar.

Answers

  • allanallan Posts: 51,467Questions: 1Answers: 7,761 Site admin

    It looks like you've got some kind of stacking CSS on the table. However, I wasn't able to get it running due to errors shown in the browser's console:

    Refused to apply style from 'https://cdpn.io/jdfill/fullpage/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
    app.js:1 Failed to load resource: the server responded with a status of 404 ()
    everypage-6d5a7f003504813cbca5.js:1 Uncaught TypeError: Cannot read property 'body' of null
    

    That was Chrome. Firefox as a similar issue. Does it run for you? What browser are you using?

    Allan

Sign In or Register to comment.