Mobile vs. Desktop visualization and horizontal scroll

  • Resolved giorgiobondi

    (@giorgiobondi)


    4 years, 9 months ago

    Dear Tobias,

    First I would like to thank you for your amazing plugin!
    I am currently renovating my website and I have some trouble with TablePress.

    In particular regarding the page https://starwarslibricomics.it/star-wars-canon-cronologia/

    The first table [id=1] is quite large, with 7 columns. I would like it to be, when visualizing from a desktop, on full width (not horizontal scrollable): i tried fixing the 100% width and the padding in my custom CSS but this seems to work only when the page is charging. When the page is ready the table goes back to the horizontal scrolling mode.

    However, I also would like the table to be in “collapse” mode from mobile. To do this I tried to put the table twice in my page, basically between a tag

    <div id="mobileshow">
[TABLECODE RESPONSIVE COLLAPSE]
</div>

    Of course neither of these solutions are working. I checked here and on th FAQ but I can’t solve the problems. Can you please help me?

    PS: the site is in under construction mode but you can log-in with
    USER: demo
    PASSWORD: demo

    Thanks a lot.

    Giorgio

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

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    I checked your link, but can’t really see what is causing the jump to the larger column width. ?? Can you maybe turn the Horizontal Scrolling off, if you don’t want it?

    About the collapse mode on mobiles: Your approach here will probably not work because this would mean that the table is initially hidden when the page is loaded. This however means that the JS code can not calculate the widths of columns (because invisible columns don’t have a width). Therefore, this approach will not work, sorry.

    Regards,
    Tobias

    Thread Starter giorgiobondi

    (@giorgiobondi)

    Hi,

    Thanks for the answer.
    I turned Horizontal Scrolling off and I checked on the custom CSS code there is this:

    .dataTables_wrapper .tablepress {
	width: 100% !important;
}

    Thanks for the explanation on the collapse mode. Any ideas on how to achieve something like that?

    Best,

    Giorgio

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks! I just saw that you are using the ColumnFilter Extension. This is the cause for the larger widths. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .dataTables_wrapper .filter_text input {
	width: 100%;
}

    Unfortunately, I don’t have ideas on how to achieve that with the collapse mode, sorry. But couldn’t you turn it on now? It should be used on the desktop then, because everything fits…

    Regards,
    Tobias

    Thread Starter giorgiobondi

    (@giorgiobondi)

    Hi,

    Thanks for the answer! Now everything is working fine as expected!
    Thanks a lot!

    Best Regards,

    Giorgio

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile vs. Desktop visualization and horizontal scroll’ is closed to new replies.