[PAGES-412] Page Editor Bars: Responsive/horizontal aligned components within an area cannot be clicked/reached Created: 05/Aug/19  Updated: 19/Jul/22  Resolved: 19/Jul/21

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: 6.2.8
Fix Version/s: 6.2.10

Type: Bug Priority: Critical
Reporter: Christian Ringele Assignee: Andrei Ichimescu
Resolution: Fixed Votes: 3
Labels: maintenance
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File JiraResponsive Footer.png     PNG File components-not-clickable.png     PNG File travel-demo-footer-1.png     PNG File travel-demo-footer.png    
Issue Links:
causality
relation
is related to PAGES-327 Cannot edit components in footer for ... Closed
is related to PAGES-699 z-index of div class="mgnlEditor mgnl... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[X]* Steps to reproduce, expected, and actual results filled
[X]* Affected version filled
Date of First Response:
Epic Link: Support
Sprint: Maintenance 65, Maintenance 66
Story Points: 2

 Description   

Behaviour:

Use for example twitter bootstrap responsive design.
Components are aligned vertically within an area.

  • When clicking on the area bar/area bar is active, one can not reach/click the component/component's bar
  • When the area bar is not active -> one can click/reach a single component, BUT: afterwards no other component can be clicked/reached.

It seems that the active Area bar hooks the mouse.

Reproduce:

Use this twitter bootstrap code in an area script:

[#-------------- ASSIGNMENTS --------------]
[#switch components?size]
    [#case 2]
        [#assign divColClass = "col-sm-6" /]
        [#break]
    [#case 3]
        [#assign divColClass = "col-sm-4" /]
        [#break]
    [#case 4]
        [#assign divColClass = "col-sm-3" /]
        [#break]
    [#default]
        [#assign divColClass = "col-sm-12" /]
[/#switch]
 
[#-------------- RENDERING --------------]
<div class="row">
    [#list components as component ]
    <div class="${divColClass}">
        [@cms.component content=component /]
    </div>
    [/#list]
</div>


 Comments   
Comment by Christian Ringele [ 05/Nov/20 ]

This counts for many other situations, where the mouse is hooked, most of JS based implementations, for example carousels. On the past you could klick on carousels, now not anymore.

Comment by Bence Vass [ 05/Nov/20 ]

We are noticing these issues in Magnolia 6.2.3. In an area with floating elements, sometimes these components are not clickable (or rather the edit bar and its buttons - see screenshot). 

If we remove float in edit mode, the elements are editable (but this is not really wysiwyg anymore).

Comment by Richard Gange [ 11/Jun/21 ]

By installing the sample templates module you can reproduce this issue. See PAGES-327. However, the travel demo uses a similar scheme with its footer and there isn't an editing issue.

So it seems in most cases this issue can be worked around by changing the html a bit.

<footer>
  <div class="footer-1>
    <container>
      <div class="row">
        <div class="col-md-3">
Comment by Andrei Ichimescu [ 19/Jul/21 ]

Fixed by lowering the z-index of mgnlPlaceholder panel so that it doesn't render on top of the selectable footer elements.

Generated at Mon Feb 12 06:18:41 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.