[Panel Container] Missing 'add' button in dialog on small screens

[jakublamprecht]

Bug Report

Current Behavior If an author opens dialog which contains a panelcontainer (e.g. Tabs component) when the viewport is small enough for the dialog to be opened as a separate site and not as a floating dialog, author can't add additional items to the panelcontainer, because the button is missing. Also an error is visible in console.

Expected behavior/code Authors can perform same operations regardless of the way that dialog is opened.

Environment

• AEM version 6.5.0
• Core Components 2.4.0

Additional context / Screenshots

[andreeadracea]

@jakublamprecht, thank you for reporting this issue. I was able to reproduce it. We will try to solve it as soon as we will have some bandwidth but I don't think this will be in the near future. We would real appreciate a contribution if you find the time to solve this problem.

[andreeadracea]

(CQ-4272637)

[richardhand]

This is a known limitation of the children editor. When dialogs are opened in the editor for small screen sizes they are outside of the editor frame and don't have access to the editor JS. The children editor relies on this JS for its handling.

There are a few potential approaches here:

1. Better indicate this known behaviour in the dialog with a note.
2. Don't display the items tab in this situation.
3. See if there's a way to decouple the current handling from the editor JS code.
4. Ensure the editor JS is available in this scenario.

(4) Is the correct fix IMO but probably has wide-reaching consequences and is a bigger change in the product. (3) Might be possible but needs research. The short-term fixes are (1) or (2) of which (1) is probably preferable as it's at least clear why the items aren't editable in this case.

[gabrielwalt]

There's a workaround: to directly drag & drop the new item components into the Tabs, or maybe better for touch devices, to use the toolbar's "+" button.

Ideally, I'd also favor to fix it the proper way (4), unless that is much more effort than to show a help text in the dialog when the Add button is not displayed; something like:

On smaller screens, adding items through the dialog is not possible, please use the toolbar's "+" icon, or drag & drop the desired item component directly into the Tabs component.

[gabrielwalt]

This will be addressed through documentation.

[bohnertchris]

This was addressed in commit 7dad9888d2b674c7bd4093ff666b4a2147267df2 of the core components documentation and is now reflected on the relevant pages.

https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/accordion.html https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/carousel.html https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/tabs.html