Adobe Experience Manager Sites & More

khalidMomin · 9/27/17

Hi All,

I have a requirement where i am using accordion.

If i expand accordion in edit mode, half contents of the expanded accordion and page contents below it is not visible due to window size is not expanded.

I investigated the issue and found that in edit mode, by default an overflow=hidden; attribute is appended by AEM instance in author mode as below:

<html lang="en" class="" style="overflow: hidden;>

If i change it to 'overflow:auto' then it works fine.

Is this a known issue?

Do we have any solution or workaround for it?

Please help.

kautuk_sahni · 10/8/17

Can you help me with the:

1. AEM version

2. Documentation that you are following OR steps to reproduce this issue?

Checkout

https://techrevel.blog/2017/05/26/coral-3-granite-ui-components/

http://labs.sixdimensions.com/blog/2014-04-10/toggle-parsys-on-the-fly-with-javascript/

http://helpx.adobe.com/aem-forms/6/layout-capabilities-adaptive-forms.html#Layout%20for%20 accordion%20design

Or

If you are going the custom route - use an established JS framework lib - such as:

http://jqueryui.com/accordion/

This way - you can control its style and functionality by using the library.

Similar issue Source- Re: AEM Text component : Not working for hidden containers if width exceeds 400px :

//

I ran into a similar issue when developing an accordion component based on Bootstrap Collapse [0].

In short, the 'trick' is to display all editable sections (whether they are the contents of a tab, accordion, or some other control) during edit mode [1]. When edit mode is disabled, the component falls back to its default behaviour.

[0] https://github.com/blefebvre/cq-bootstrap-accordion

[1] https://github.com/blefebvre/cq-bootstrap-accordion/blob/master/src/main/content/jcr_root/ apps/bruce/components/accordion-bootstrap/accordion-bootstrap.jsp#L27

I hope this would help you.

~kautuk

Kautuk Sahni

View solution in original post

kautuk_sahni · 10/8/17