Page MenuHomePhabricator

too many buttons in the toolbar, or little available width for the toolbar, causes buttons to overflow
Closed, ResolvedPublic


toolbar overflow

See attachment.

I think the toolbar should become 2-row automatically.

Version: unspecified
Severity: normal


overflow.png (121×475 px, 46 KB)

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:04 PM
bzimport set Reference to bz23943.
bzimport added a subscriber: Unknown Object (MLST).

*Mass-change: Move WikiEditor bugs to component and remove blocker bug where*

This has been solved on Italian Wikisource by setting automatic height to the container divs: $('.wikiEditor-ui-toolbar div').css('height', 'auto');

It also happens with standard buttons when using low screen resolution, or enlarging font size via browser. It is more evident on Wikisource, in namespace Page, because ProofreadPage extension forces the editbox to half width.


overflow.png (121×475 px, 46 KB)

Fwiw... WikiEditor was probably rolled out before the series of CSS3/HTML5 additions & improvements of the day were realistically supportable by MediaWiki so its framework is kind of "klunky" as a result when compared to the latest design approaches.

One way you could recover some "button space" for example is to invoke the border-box setting for box-sizing: for the various toolbar DIV containers and then tweak your way back to the main DIV, refining any desired positioning as you go along.

To get an idea of the differences in layout without breaking anything just apply the following to your local .css file

.wikiEditor-ui-toolbar * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Change 473220 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/WikiEditor@master] Toolbar: Allow groups to be multiline/wrap

Before and after shots of the it.wikipedia additional toolbar buttons gadget:

Screen Shot 2018-11-13 at 15.42.28.png (688×774 px, 204 KB)

Screen Shot 2018-11-13 at 15.47.34.png (816×878 px, 218 KB)

Change 473220 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Toolbar: Allow groups to be multiline/wrap

matmarex assigned this task to TheDJ.
matmarex removed a project: Patch-For-Review.