Posted: 4 May 2016 13:42 EDT Last activity: 3 Feb 2017 4:35 EST
Expanded accordion in overlay doesn't provide scroll bar. Is this correct behavior?
I have an accordion layout in an overlay. On load, if the content extends beyond the screen, the scroll bar is visible, but if the content is not loaded beyond the screen on load, and an accordion section is opened that does expand beyond the screen, a scroll bar is not provided.
I see the item in help that mentions "When accordion controls are within a section that is within a panel of a panel set, runtime behavior automatically adjusts to consume the entire available height, and to supply scroll bars when necessary." but panel sets are deprecated.
Should the overlay provide a scroll bar as needed? Would a layout group accordion be better suited for this? Using PRPC 7.1.9.
There is no grid in the accordion layout. There is a dynamic layout for the overlay header, and then, in this case, an accordion layout containing three dynamic layouts, each containing a paragraph rule to display the content. The reason the dynamic layouts are used is because un-ordered lists are not rendered correctly when a paragraph rule is placed directly in the accordion layout. A custom CSS class was also placed on the dynamic layouts containing the paragraph rule to correct the un-ordered list display, as suggested by Pega Support.
The initial load does not require a scroll bar.
Once you open section 3, the end of the content is cutoff and there is no scroll bar provided. Scroll bar shown in these images are for the application.
If I reverse this layout, and load section 3 first, the scroll bar is visible, and the overlay has no issues with going back and forth between sections, showing the scroll bar when necessary. The order of sections is determined by the importance of information being presented to the user, so I can't show section 3 first.
Pega Support came back and said this use case for dynamically sized content was not supported for overlays, and did not provide a fix. BUT - updating the overlay skin with additional height and overflow attributes has resolved this issue.