Hello, I need some help with sticky functionality for an app.
I have a layout with 3 placeholder - 1 on each side of the main content and 1 above the main content. I have applied some CSS to these placeholders to make the content sticky when scrolling using the following CSS:
.sticky-overview {
position: -webkit-sticky;
position: sticky;
top: 169px;
z-index: 3;
}
I have a created a menu for the left placeholder and it contains an Accordion - When all the accordion items are collapsed the menu sticks, but as soon as I expand an accordion item that is too long for the screen it no longer sticks and scrolls up. How can I ensure that the menu sticks while expanded and make the content inside the the block/accordions scrollable? Adding a scrollable area widget does not seem to work as expected.
P.S. This is for Reactive
Hi @Karnika-EONE
Thanks you for the quick response. I gave it a try and that did unfortunately not work in my case. I did, however, find another solution.
I added height calculation and overflow-y: auto to my CSS as follows:
.sticky-menu {
height: calc(100vh - 169px);
overflow-y: auto;
It fixed the issue and adds scrolling functionality if the content exceeds the height.
Kind regards
Hi @AJ Naude
.osui-accordion-item__content--is-collapsed {
display: none!important;
osui-accordion-item__content--is-expanded {
display:block;
can u try this Your Css Please?
Hope it works.
Best Regards
THanks
Karnika.K