Page MenuHomePhabricator

Horizontal scrolling when content exceeds screen width
Closed, ResolvedPublic

Description

Author: philinje

Description:
While related to other bugs, this one will provide a quick fix until the other problems are dealt with. The typical problems involve some tables, possibly on portal pages as in bug 22187, or photos after they are clicked on and enlarged, which needs to be solved more completely in bug 31931.


Version: --
Severity: enhancement

Details

Reference
bz32123
ReferenceSource BranchDest BranchAuthorTitle
repos/cloud/toolforge/jobs-api!12fix_buildservice_jobmaindcarocommand: support non-args on build service jobs
repos/cloud/toolforge/jobs-api!11taavi/buildpack-argsmaintaavijob: Fix buildpack arg parsing
Customize query in GitLab

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:05 AM
bzimport set Reference to bz32123.

Any particular examples?

The [[Portal:Literature]] page noted on bug 22187 seems to actually fit on screen, it just... shouldn't. ;) The same problem occurs on desktop browsers if the window is narrow.

Proper fix is to fix the styles; there's no magic universal style for 'portals', they're all made individually and some format better than others.

The problem is hardcoded stuff like this:

<div style="float:left; width:60%;"> <!-- This width add to the margin below to equal 99%-->

{{Random portal component|max=22|header=''Selected article''|subpage=Featured article|seed=53}}

{{Random portal component|max=20|header=''Selected picture''|subpage=Featured picture|seed=83}}

</div>

<div style="float:right; width:39%"> <!-- This margin should be right of the above -->

These need to, well, not assume that the window is big enough that 60% and 39% of it will be suitable widths for content.

Probably setting up some global styles for "two-column" content that automatically devolves to single-column on narrow screens would be a good help...

This seems to work nicely...

https://en.wikipedia.org/wiki/User:Brion_VIBBER/vector.css

^ added some test styles:

/* On wide screens, show these as two columns */

.portal-column-left {

float: left;
width: 60%;

}

.portal-column-right {

float: right;
width: 37%;

}

@media only screen and (max-width: 720px) {

/* Decouple the columns on narrow screens */
.portal-column-left, .portal-column-right {
  float: inherit;
  width: inherit;
}

}

and used those instead of hardcoded left/right/width on http://en.wikipedia.org/wiki/Portal:Literature/Mobile_redesign_attempt

With the styles active, on a regular browser this shows up with the double columns, until you make the browser window narrower than 720px at which point it switched to single-column. The mobile view doesn't get the styles at all so shows the single column, but should do the same if it gets the styles, at least on decent browsers.

Note that I don't think we can use CSS3 media queries on inline style elements, so these'd have to be added to a global stylesheet on the site.

Note that the section near the bottom of the page with a lot of icons still needs adjustment, as it's a big table -- it should probably be a bunch of floats or inline-block elements that can rearrange themselves to fit.

Created attachment 9632
Screenshot of enwiki Portal:Literature on current mobile view

Some sections are too big for the tiny columns they've been placed into.

Attached:

iOS_Simulator_Screen_shot_Dec_7,_2011_1.37.59_PM.png (480×320 px, 49 KB)

Created attachment 9634
Same section without columns

Same section on http://en.m.wikipedia.org/wiki/Portal:Literature/Mobile_redesign_attempt with the columns disabled

Attached:

iOS_Simulator_Screen_shot_Dec_7,_2011_1.57.20_PM.png (480×320 px, 54 KB)

Stuck a quick request for comments or objections on:

https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css#Portal_column_width_vs_narrow_and_mobile_screens

If no objection, will add the styles to the Common.css on enwiki and slip them into some of the portal pages to try them out.

Note that wide tables and images do seem to trigger horizontal scrolling (such as the icon table at the end of that literature portal)

Created attachment 9637
Screenshot of improved related-portals links

Working on redoing the hardcoded table links in a more modern way.

  • Uses existing templates (From template:portal etc) for grabbing the icons
  • wraps whole thing in a template, and each item is from another template -- easier to override and change in future
  • uses floats with a fixed size instead of tables, so they fit into whatever space is given for them
  • fits two columns on iPhone

Attached:

iOS_Simulator_Screen_shot_Dec_7,_2011_4.27.19_PM.png (480×320 px, 62 KB)

Additional note: the horizontal scrolling where needed works fine in Safari on iOS 5, but doesn't on Android 2.3.6 (Nexus 1).

Will see if it needs some customized styles or something...

To confirm -- Phil, was this bug meant to complain about wide things causing annoying horizontal scrolling? (All the work above is to fix wide things.)

Or to complain that horizontal scrolling *did not work* when there were wide things on Android browser? If so, that's because the styles have 'overflow-x: hidden' on the body tag, disabling horizontal scrolling.

I'm removing that in r105582 on trunk, please indicate if there's any problem with that.

Closing this bug out -- bug 30887 is specifically about fixing portals, and further talk on the above stuff should go there.

philinje wrote:

Seeing the scrolling problem in Android app with Arabic pages, possibly all RTL languages. Here is an example:

http://ar.m.wikipedia.org/wiki/%D8%A7%D9%84%D8%AF%D9%82%D9%87%D9%84%D9%8A%D8%A9

philinje wrote:

Also Android browser on nexus One 2.3.6.

philinje wrote:

Last section on that page when opened has a better example of the problem.

Since this is specific to RTL this should probably be a separate bug.

Broke the RTL-specific bit out to bug 33688, closing out the general issue.