Responsive Tables: Zoom and alignment

  • Resolved sephan

    (@sephan)


    3 years, 1 month ago

    Hi Tobias I need help again.
    For responsive mobile view, I use Responsive Tables with the “scroll” tag.
    I got a problem/question I would like to solve.
    The first one: I would like to enable a zoom-out feature within the scrollable mobile table. Basically letting the Table scale down to sort of zoom out. So that the user gets more table lines at once on the screen.

    The second problem I got is the alignment of the search-bar. I would like to align the search bar on the left side of the screen, but only in mobile view. Is that possible?

    Maybe if this helps: I use two different Shortcode Elements on the page, both displaying the same Table. One element for mobile and one for Desktop and Tablet.

    Best regards, Stephan.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter sephan

    (@sephan)

    3 years, 1 month ago

    Oh and I actually got two other questions. I would like to put a frame around the table but only on mobile view. And secondly, is it possible to exclude the filter section from scrolling? To sort of make them static? Would that be possible as well?

    Thank you for your great work on that project!
    Stephan.

    • This reply was modified 3 years, 1 month ago by sephan.
    • This reply was modified 3 years, 1 month ago by sephan.
    Plugin Author TobiasBg

    (@tobiasbg)

    3 years, 1 month ago

    Hi,

    thanks for your post, and sorry for the trouble.

    There should actually be no need to include the same table twice (in those Elementor elements), because the CSS can already detect when scrolling is needed.

    Right now, to move the search field left and to add a border around everything, you could add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media screen and (max-width: 768px) {
    #tablepress-1-no-2_filter {
        float: left;
    }
    #tablepress-1-no-2-scroll-wrapper {
        border: 2px solid #000000;
    }
}

    Unfortunately, I’m not aware of a “zoom” feature here. You would have to adjust the font size in the CSS for the mobile view then.

    Regards,
    Tobias

    Thread Starter sephan

    (@sephan)

    3 years, 1 month ago

    Thank you for your fast help! So everything works fine except for this part of my question.

    And secondly, is it possible to exclude the filter section from scrolling? To sort of make them static? Would that be possible as well?

    It’s not implemented in the code right? Is it even possible to make?

    I’ve tried to use position: sticky; but it’s not working. :/
    And it should only exclude from scrolling sideways. So position: fixed; won’t work.
    Best regards,
    Stephan.

    Plugin Author TobiasBg

    (@tobiasbg)

    3 years, 1 month ago

    Hi,

    ah, sorry, I missed those questions. You could maybe try using the “Horizontal Scrolling” checkbox on the table’s “Edit” screen, instead of the scroll mode of the TablePress Extension. This adds horizontal scrolling via JavaScript, which should result in the search filter to not move sideways.

    Regards,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive Tables: Zoom and alignment’ is closed to new replies.