Page MenuHomePhabricator

VisualEditor: Toolbar should clear float to avoid misalignment by extra elements
Closed, ResolvedPublic

Description

On wikis where certain "topicons" are moved out of the mw-content-text wrapper into the root of #content the VisualEditor toolbar shows a weird blank space.

The icons in question are invisible due to float overlap, but they do push down the toolbar and occupying space to the right of the "Save and review" button thus pushing it and the rest of ve-ui-toolbar-actions to the left.

To reproduce this situation, run the following one or more times:

$('#content').prepend(
    '<div class="mw-topicon" style="display: block; width: 20px; height: 20px; background: pink; float: right; margin-left: 3px;">x</div>'
);

Version: unspecified
Severity: normal

Details

Reference
bz48734

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:25 AM
bzimport set Reference to bz48734.

Created attachment 12373
What the toolbar usually looks like

Note absence of space between the Vector tabs and the toolbar, and the Save button is flush to the right.

Attached:

normal.png (1×2 px, 965 KB)

Created attachment 12374
Current misalignment when there are extra elements in #content

Such as the case currently on https://de.wikipedia.org/wiki/Berlin

Attached:

wtopicons-broken.png (1×2 px, 962 KB)

Created attachment 12375
What it looks like with clear:both patch applied

The icons become visible again and the actions toolbar (right hand side of the toolbar) is no longer pushed to the left but flush to the right again.

Attached:

wtopicons-fixed.png (1×2 px, 955 KB)

Related URL: https://gerrit.wikimedia.org/r/64989 (Gerrit Change Ic5f73ac1eb8c41b891dd1c67b71795cb6c456141)