Enable horizontal scrolling to make tables with many columns easier to see

  • Resolved muhiBBi

    (@muhibbi)


    3 years, 5 months ago

    Hello,

    When I enable “Enable horizontal scrolling to make tables with many columns easier to see” feature, the scrolling issue occurs between table head columns and body columns.

    https://i.snipboard.io/MtWNiS.jpg

    When I disable this feature, the problem is solved, but I need to use this feature.

    Even though I disabled the JS and CSS minify and combine properties, it was not resolved. The problem was not caused by that. I didn’t understand why. Can you help me?

    • This topic was modified 3 years, 5 months ago by muhiBBi.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    I have seen this before, but unfortunately, could not yet find a reason for this behavior. Something is causing the JS code to calculate wrong column widths.

    As a workaround, I recommend to turn off the checkbox and instead use the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/
    This also adds horizontal scrolling, but in a different technical way.

    Regards,
    Tobias

    Thread Starter muhiBBi

    (@muhibbi)

    No, nothing has changed. It’s still broken. My table is overflowing due to having too many columns.

    • This reply was modified 3 years, 5 months ago by muhiBBi.
    • This reply was modified 3 years, 5 months ago by muhiBBi.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    when I check your page, everything still looks like before? Did you really uncheck the “Horizontal Scrolling” checkbox and install and activate the TablePress Responsive Tables Extension, and add the Shortcode parameter?

    Regards,
    Tobias

    Thread Starter muhiBBi

    (@muhibbi)

    Yes, I did everything you said. When I didn’t get the result I wanted, I still had to activate the “horizantal scrolling” feature. Otherwise my table is overflowing from the page.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    can you please set everything up again per my instructions, so that I can see the problem for myself then?

    Regards,
    Tobias

    Thread Starter muhiBBi

    (@muhibbi)

    I’ve looked into the issue a bit.

    The problem was solved when I changed the box-sizing:content-box code in the inline style code of the div below to box-sizing: border-box !important with normal CSS.

    <div class="dataTables_scrollHeadInner" style="box-sizing: content-box;width: 1126.55px;padding-right: 0px;">...</div>

    So the problem seems to be caused by the box-sizing:content-box style.

    • This reply was modified 3 years, 4 months ago by muhiBBi.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    ok, interesting. Good to know. I suggest that you fix it with such CSS then, if you don’t want to use the other method.

    Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Enable horizontal scrolling to make tables with many columns easier to see’ is closed to new replies.