Horizontal scrolling affects table header behavior in certain conditions

  • Resolved Daniel Maier

    (@demaier)


    5 years, 9 months ago

    Hello,

    If you go to https://cityofwinterpark.org/visitors/arts-culture/ then click on the “Directory” table you will see that the table header is not distributed correctly. As soon as you interact with the table, lets say by sorting it, the header width loads properly and everything looks normal.

    Do you have any suggestion here? It seems some resource is not loading properly until there’s an user interaction.

    Thank you!

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The reason for this is that the table is shown in a tab. Unfortunately, the JavaScript code that adds the horizontal scrolling feature can then not reliably detect and calculate the individual column widths.
    I therefore recommend to turn off the “Horizontal Scrolling” checkbox. Then, to again add such a feature, but in a different technical way, you can use the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

    Thread Starter Daniel Maier

    (@demaier)

    Yes, I noticed that. I actually ran into a similar issue with another plugin “Collapse-Pro-Matic” and fortunately they had a class that I could add to the shortcode to fix this issue. The class name is “maptastic” if you visit https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/ and search for that you will find the following:

    maptastic: The target content area will not be hidden initially but rather placed off screen to allow other shortcodes such as google maps to render.

    I will look into the responsive tables extension you talked about.

    Thank you for looking into this.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    interesting approach. From what I understand, this would have to be implemented in the tabs plugin however, as well?

    Regards,
    Tobias

    Thread Starter Daniel Maier

    (@demaier)

    Possibly, since that is wrapping the table.

    On the other scenario the collapsible feature was wrapping a form and it was not allowing it to load a signature field.

    I just don’t have the necessary knowledge to implement that on the tab system. ??
    I’m not sure what that class does, it probably trigger some JavaScript.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, it probably triggers a different behavior of the JS.

    Unfortunately, this is also beyond my area of expertise, as I’m not that deep into the development of the JS code for the DataTables library.
    Sorry.

    Regards,
    Tobias

    Thread Starter Daniel Maier

    (@demaier)

    No worries. Thank you.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome!

    Best wishes,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Horizontal scrolling affects table header behavior in certain conditions’ is closed to new replies.