Data table and column margin on mobile

  • Resolved Ari123

    (@ucdguy)


    3 years, 10 months ago

    Hi!

    Thank you again for a great plugin!

    (Note that I want the horizontal scrollbar to appear on tables in mobile and therefore have the responsive table option turned off.)

    I’m having issues with adding margins to columns containing data tables.

    For example, in this image, I have a page only composed of a data table and a black border around the section column. (I have also added text above and below the table to make things clearer.) The column has zero margin and it appears correctly on the frontend. All good so far.

    However, here is what it looks like when I add a 10px margin to the column. The same issue is also on the frontend – the right border isn’t visible.

    It’s only once I remove the data table that the column behaves as expected with a 10px margin, as shown here.

    Is there a way of keeping the horizontal scrollbar for an overflowing table while also having a margin on the column containing that table without it breaking?

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Amit Paul

    (@paulamit)

    3 years, 9 months ago

    Hello @ucdguy,

    Greetings. Hope you’re doing good.

    Well, I have just checked your query. Thanks for your nice explanation with the screenshots. It makes us easy to check. For the margin issue, would you kindly try to add padding instead of a 10px margin? Hope it helps to make the right side border visible.

    And for the horizontal scrolling, here I can see, that your data table is already horizontal scrollable. Have a look, please:- https://d.pr/i/jHiKRu

    However, let me know if I have missed something. You can also share us with screen-recording.

    Thank you!

    Thread Starter Ari123

    (@ucdguy)

    3 years, 9 months ago

    For the margin issue, would you kindly try to add padding instead of a 10px margin?

    I can add padding instead of a margin without issue. However, it doesn’t fix my issue about wanting to shrink the size of the column by using a margin.

    And for the horizontal scrolling, here I can see, that your data table is already horizontal scrollable.

    Yes, there is no issue with that. I was just highlighting that I’m not asking you about that scrollbar as I’m sure that’s what you’re usually asked about.

    Are you able to reproduce my issue on your end?

    Here are the steps:

    1) Add a new page.

    2) Add a data table to that page that’s wide enough to overflow on your mobile device.

    3) Add a border to the section column containing that data table.

    4) Add a 10px margin to that column

    Does the right border behave as expected for you on your mobile device?

    Plugin Support Amit Paul

    (@paulamit)

    3 years, 9 months ago

    Hello @ucdguy,

    Hope you’re doing good. Really sorry for the delay to reach you.

    Yes, I have reproduced the issue as you have mentioned. Really sorry for it. We’ve already marked this for future investigation.

    However, since you want to shrink the size of the column by using a margin. You don’t need to add the margin there. Just create a section with an inner section, then use the Data Table widget on the inner section and also put a border on the inner section column. Hope it will work as your need.

    You may also check this video: https://d.pr/v/TNcXiQ

    Hope it helps you.

    Thank you!

    Plugin Support Amit Paul

    (@paulamit)

    3 years, 9 months ago

    Hello @ucdguy,

    Hope you’re doing well.


    Would you kindly give us feedback about the issue that you’re facing? If you still get the issue, please let us know. Because We couldn’t find any feedback response from you also.

    
Thank you!

    Plugin Support Amit Paul

    (@paulamit)

    3 years, 9 months ago

    Hello @ucdguy,

    Hope you’re doing good.

    As we’re not getting any response from you, We believe that your issue has been solved. And so we mark this topic as resolved now.

    And for any further help, you can also knock here anytime.

    Thank you!

    Thread Starter Ari123

    (@ucdguy)

    3 years, 9 months ago

    Hi,

    My apologies for not getting back sooner.

    Your workaround solved the issue, thank you for going to the effort of recording a video!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Data table and column margin on mobile’ is closed to new replies.