The frontendediting JavaScript adds an "edit" button when hovering over a module. This button is first appended to the module and then rebased to the body element with position: absolute
. To place the button at the same position as it had inside the module, the position (top
and left
attributes) is retained.
At the moment, also the width and height are adopted from the button, that was placed inside the module, and are set explicitely via CSS. This leads to problems, if an explicit width or height is not desired by the template, as in the following code:
a.btn {
box-sizing: border-box;
padding: 5px;
}
The problem with this CSS line is, that the javascript takes only the element's inner width and height into account, not the padding. With border-box
, the width
attribute is equivalent to the inner width + padding + border. Thus, a button that originally had an inner width of 20px gets an explicit width: 20px
that will consist of 10px inner width and 2*5px left and right padding. So the javascript shrinks the button.
Description of the PR
- Removes the explicit set width and height.
- Resets the attributes for
bottom
and right
to auto
, so elements won't get stretched because they have both left
and right
values.
Testing instructions
- Enable module frontend editing.
- Log in in the frontend with an administrator account.
- Hover over a module, pay attention to the edit button.
- In your template, use a CSS configuration that will have problems with specific widths and heights, e.g. the code shown above.
- Compare the results with and without the sensitive CSS lines.
- Apply the patch.
- Test again.
Please test with debug mode enabled and disabled to make sure that both javascript files behave alike. Feel free to test with additional templates! Just maybe not with beez, because the frontend editing stuff doesn't seem to work there...
It would be nice if someone who was involved with the original implementation of the frontend editing feature by the UX group (@beat?) could have a look at this. If the explicit width and height had any more purpose than the one I recognized and if this PR might break anything, please tell me!
I have tested this item successfully on 0dec81c
Test OK
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8977.