Page MenuHomePhabricator

Toolbar at the top wrongly positioned
Open, Needs TriagePublicBUG REPORT


Steps to replicate the issue

  • Use VEforAll with PageForms in a multiple-instance setup
  • Apply class="toolbarOnTop" to move the VE toolbar to the top, right above the textarea
  • P.S. Not tested with FlexForm yet

What happens?:

  • Initially, the toolbar appears vertically stacked on the extreme left of the screen.
  • This may get restored after you add a new instance or do something else in the form,
  • However, the first line of the textarea is buried beneath the toolbar.

What should have happened instead?:

  • Toolbar should be at the top as intended
  • The first line of the textarea should not be buried beneath the toolbar.

Software version

  • VEforAll 0.5

Other information

Because the inline styling and the addition and removal of classes are dynamic, it is not always easy to see just what happens.

The first issue happens because of

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar { position:fixed; }

When you do something else in the form, classes may get changed so that this styling doesn't take effect.

The second issue happens because inline styling with height:0 is dynamically applied to the toolbar, or rather the container element that has relative position (incl. classes oo-ui-toolbar oo-ui-toolbar-position-top ve-ui-toolbar). Because the toolbar within that container does have height it overlaps with the textarea.
(A temporary workaround is to force a min-height on the container, e.g. 50px. )

Event Timeline

I don't understand this issue - do you have some special styling in the form, or the wiki, that overrides the CSS defined by VEForAll?

Not that I'm aware of, though perhaps the Chameleon skin is attempting something.

As for the first issue, I wonder if the intention of .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { position:fixed; } is that the toolbar becomes sticky at the top.

It would be interesting to know if you see this same problem in other skins, like Vector.

Same thing in Vector.

When VE is scrolled into view and becomes active, I think two things happen dynamically to make the toolbar sticky at the top:

  • The class ve-ui-toolbar-floating gets added
  • Inline styling left/right gets added to the div element with class = oo-ui-toolbar-bar

The second step here does not work correctly if VE4all is used for a multiple-instance template. What I got was left: 0px and e.g. right: 1462px; (probably depending on one's screen width). No wonder the toolbar was pushed to the left of the screen!

If VE4All is used elsewhere in the form, as in not in a multiple-instance form, the toolbar does stick at the top, and I can see in the browser console that it has different values for those left/right properties.

A user would fail to notice the toolbar at all because it is buried until the fixed header that comes with my Chameleon skin . But that's a different issue that's been raised elsewhere (e.g.