Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

If uiNode has a non-static position, add toolbar is positioned incorrectly #1447

Open
holatuwol opened this issue Nov 11, 2020 · 1 comment
Open

If uiNode has a non-static position, add toolbar is positioned incorrectly #1447

holatuwol opened this issue Nov 11, 2020 · 1 comment

Comments

@holatuwol
Copy link
Member

holatuwol commented Nov 11, 2020 •
edited
Loading

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

If uiNode has position set to something other than static and has a margin-top style set, the add toolbar is positioned in the wrong place.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

Wrap the body content with a div with a margin-top and the default value for position set.

<body>
<div id="wrapper" style="position: static;">
...
</div>
</body>

Update the Alloy Editor configuration so that the uiNode is set to this wrapping div.

var editor1 = AlloyEditor.editable('description', {
    imageScaleResize: 'scale',
    uiNode: document.getElementById('wrapper')
});
var editor2 = AlloyEditor.editable('editable1', {
    imageScaleResize: 'scale',
    uiNode: document.getElementById('wrapper')
});
var editor3 = AlloyEditor.editable('headline', {
    imageScaleResize: 'scale',
    uiNode: document.getElementById('wrapper')
});
var editor4 = AlloyEditor.editable('editable2', {
    imageScaleResize: 'scale',
    mode: 'full',
    uiNode: document.getElementById('wrapper')
});

Refresh the page. Click anywhere in an editor and observe that the add toolbar is still in the correct position.

Update the wrapper div so that it has a non-default position:

<div id="wrapper" style="position: absolute;">

Refresh the page. Click anywhere in an editor and observe that the add toolbar is in the wrong position.

What is the expected behavior?

The add toolbar is in the same position as if it were position: static.

Which versions of alloy-editor, and which browser / OS are affected by this issue? Did this work in previous versions?

Tested in Chrome.
@julien
Copy link
Contributor

julien commented Nov 27, 2020

Hi @holatuwol thanks for reporting this.

The uiNode option was added for a specific use case in DXP where the editor was occasionally rendered in a modal window (that contained an iframe) and is only used to set the scrollTop position of certain elements.

If you want to modify this, feel free to send a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@julien @holatuwol