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. )
