Page MenuHomePhabricator

Table overflows the page content on smaller windows in Vector
Closed, ResolvedPublic

Description

Visit https://en.wikipedia.org/wiki/Comparison_of_web_browsers and you'll see that the content scrolls horizontally because of the table in the https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Web_technology_support section (and some other tables in other sections). Strangely, the same problem exists in Minerva. We should explore the root cause of this and fix the issue. One solution is to scroll the table contents only.

Here is a screencast of the issue (Notice, I'm not logged in):

Event Timeline

bmansurov created this task.Jun 9 2016, 4:35 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 9 2016, 4:35 PM
bmansurov updated the task description. (Show Details)Jun 9 2016, 5:09 PM
jhobs triaged this task as High priority.Jun 9 2016, 5:16 PM
jhobs moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
jhobs added a subscriber: jhobs.

@bmansurov to add more details including screencasts.

bmansurov updated the task description. (Show Details)Jun 9 2016, 5:36 PM

Me showing this broken on FF in minerva with a wider (than mobile) window.

jhobs added a subscriber: Nirzar.

Tagging @Nirzar for design input. We have some ideas on what the proper behavior for this should be (horizontally scrolling the table, like mobile does), but it's up to your discretion.

jhobs renamed this task from Table overflows the page content in Vector/Minerva to Table overflows the page content on smaller windows in Vector.Jun 15 2016, 3:56 PM


Me showing this broken on FF in minerva with a wider (than mobile) window.

Created T137892 for this specific bug.

@Nirzar what do you think is the proper UX flow for this (see screencast)?

jhobs lowered the priority of this task from High to Normal.Jun 30 2016, 8:44 PM
Nirzar added a comment.Jul 1 2016, 6:23 AM

Strangely, the same problem exists in Minerva

i see the behavior we see on all wide tables where you scroll the table horizontally. unfortunately that's the experience on small screen for big phones for all tables until we figure out a better way to display tables their.

as far as the desktop layout goes, because the table is large, its creating space on right and breaking the layout. the specific table which is breaking is in #web technology support. we should make sure all tables on the page are width <= 100% of .content. that means squeezing the columns. < on desktop specifically.

that means squeezing the columns.

Wouldn't that mean that some columns become so squeezed that they will contain only one letter? What are the downsides of making the table scrollable? Because the users are not used to scrolling the tables on desktop?

SamanthaNguyen moved this task from Backlog to Bugs on the Vector board.Jan 5 2017, 4:04 AM

it seems that wrapping the table in a div like so <div style="overflow-x:auto">...</div> is one way to prevent this issue for Vector, Minerva, and MF. You can see this on the table in the Web technology support section and in the Image format support section. @Jdlrobson curious what kind of approach you think might be appropriate here? Is there a way to bake that kind of styling into all tables?

Jdlrobson closed this task as Resolved.Jul 2 2019, 6:34 PM
Jdlrobson claimed this task.

Fixed on the wiki. There is no silver bullet.

Isarra added a subscriber: Isarra.Jul 2 2019, 6:54 PM

This seems to be a common issue with a lot of tables across a lot of wikis, wikimedia and third-party alike. Is this really resolved? Would including a wrapper like that (but without the styles, specifically) perhaps be feasible core-side, allowing skins to handle it such that the styles themselves may or may not be applied across all modes, thus opening up the possibility of doing so where needed across the board?

This seems to be a common issue with a lot of tables across a lot of wikis, wikimedia and third-party alike. Is this really resolved? Would including a wrapper like that (but without the styles, specifically) perhaps be feasible core-side, allowing skins to handle it such that the styles themselves may or may not be applied across all modes, thus opening up the possibility of doing so where needed across the board?

You mean wrap all tables in a table-container div? I guess this is feasible, but given how tables are used in templates I'd be a bit concerned about how this might cause problems in complex templates (especially given many are using overflow containers already). Personally I think the solution here is a social one - we've got to stop using tables for anything other than table's of data first. If we can get there, the general solution of a table-container div would be feasible but we've got a long way to go there so for now fixing one template at a time seems the way to go.

Isarra added a comment.Jul 8 2019, 5:58 PM

We could probably safely wrap any tables specified as wikitables, since that would rule out all the plain ones regardless (as the weird template tables tend to be), but given that's a class inside the table, it might be a bit messy to actually identify these, so yeah.

TheDJ added a subscriber: TheDJ.Jul 9 2019, 1:56 PM

Seems like something that could easily be experimented with, using some javascript. A minerva specific gadget ?