Table overflow on mobile

  • Resolved samuelmarcinko

    (@samuelmarcinko)


    4 years, 11 months ago

    Hi guys, I want to ask. I’m using TablePress on website, on desktop version is everything okey, but on mobile because table has more columns I had to turn on scroll bar and swipe function. That’s great, but I want to add some overflow shadows or something like this to tell a user that there is overflow content and he can swipe for see it. I saw something what I need on codepen ( https://codepen.io/ramiro-ruiz/pen/KKPmoaV ). It’s just overflow shadows on sides of the table. Can you please help me with that? I tried to create custom class in settings and write a CSS which I found online and then used it in table, but it’s not working. Thanks

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

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    I played with this a bit, but the only way that I could make it look good was by turning off all background colors in the table rows.
    Then, you should turn off the “Horizontal Scrolling” checkbox on the table’s “Edit” screen and instead use the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ (because it adds this effect with just CSS).

    Then, this “Custom CSS” should add the shadows:

    .tablepress-scroll-wrapper {
	background-image: 
		/* Shadows */ 
		linear-gradient(to right, white, white),
		linear-gradient(to right, white, white),
		/* Shadow covers */ 
		linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
		linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   

	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Table overflow on mobile’ is closed to new replies.

Tags