Open bick687 opened 5 years ago
There are several ways to fix this with a bit of added CSS to your wikiname.com/wiki/MediaWiki:Pivot.css
page. We should add this to the pivot website.
I'd love to know how, as the only method I could figure out was to manually wrap each table in:
<div class="scroll-all">Table code here</div>
With the following CSS:
.scroll-all {
overflow:auto!important;
-webkit-overflow-scrolling: touch;
}
I finally figured out how to do this automatically without wrapping every table in a div. As it turns out you need display:block
and a width statement is required for whichever direction you're wanting the scroll to work. Now all tables will scroll on our wiki.
In the absence of truly responsive table layouts (hard for people to create and use as they'd have to do tables differently), this seems to be best median solution (for us) for tables that overflow on mobile.
table {
width:fit-content; /* A width property and value is required, if that won't work use width: auto; */
overflow:scroll;
display:block; /* Required for scroll to work */
border: 0!important; /* Prevented double-dipping on boarders for our particular theme*/
}
Some other adjustments may be needed for a person's specific setup (we have lots of CSS customizations in ours and this worked perfectly for our customized setup.
Setup
Issue
I'm trying to figure on how to add horizontal scroll to tables through CSS, as some of the tables are overflowing on mobile screens and there's no way to see the overflown data in those tables.