https://bugzilla.wikimedia.org/show_bug.cgi?id=64577
Bug ID: 64577
Summary: Tables on mobile are a big fat mess
Product: MobileFrontend
Version: unspecified
Hardware: All
OS: All
Status: NEW
Severity: normal
Priority: Unprioritized
Component: Hygiene
Assignee: jrob...@wikimedia.org
Reporter: jrob...@wikimedia.org
Web browser: ---
Mobile Platform: ---
== Background ==
Many tables generated by wikitext are bigger than 320px. On a 320px screen,
this causes the entire viewport to grow to the size of the table and can break
the experience of the entire site. This stretches the search bar and makes the
mobile site very unusable.
== Current solution (hack) ==
Currently the mobile site deals with this situation by forcing the table to
have width 100% and adding overflow scrolling (which is enabled by making the
table a block element). This solution is not perfect as overflow-x is not fully
supported across all mobile devices. To see an example of the sort of table
this rule targets the table on the presidental election results page [2]
provides a good example.
Side note: We may also want to make it possible for templates in the short term
to opt out of the styling hack e.g. using a nohacks class
== Long term solution ==
Ideally it should be possible for templates to define their own behaviour for
tables on mobile devices.
There are various responsive tables [1] techniques but there is no one fit for
all solution. Note some tables [2] do not even scale well on even desktop
devices.
It should be possible for template editors to use media queries to style tables
differently with the closure of the templating RFC [3] so that we can kill this
table hack.
Other solutions are welcomed.
== Further information/history ==
See bug 64516 and 36936
[1] http://css-tricks.com/responsive-data-tables/
[2]
https://en.m.wikipedia.org/wiki/List_of_United_States_presidential_election_results_by_state#section_1
[3]
https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
--
You are receiving this mail because:
You are on the CC list for the bug.
_______________________________________________
Wikibugs-l mailing list
Wikibugs-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikibugs-l
