Accordion Sticky Header

Radzen.Blazor Components
1

Hello everyone,

before i changed the NuGet Package Version to the Major Version 7 I had sticky headers for my Accordions (with a little trick, someone (@deesnider (Sticky Accordion Header)) in this forum told me):

/* The header of the Page */
.user-guide-sticky-header-scroll-container {
    position: sticky;
    background-color: white;
    z-index: 10;
}

/* The actual Scrollview for the Accordion */
.user-guide-scroll-container {
    max-height: 78vh;
    overflow-y: auto;
}

The Result was like this:

grafik
grafik1312×489 58.6 KB

when i scrolled down, it looked like this:
grafik
grafik1255×228 47.5 KB

the header stayed, until i scrolled to the next accordion-item.

But since i upgraded now it doesnt work anymore... As soon as i scroll, the header disappears and if the Item has to much content, it isnt that suitable for the user to close the item. They would have to scroll up again, just to close it:

grafik
grafik1271×160 16.2 KB

I hope I explained my problem properly.

Im thankful for every bit of help (:

2

Hi @Samuel_Scherrer,

The solution suggested by @deesnider works in the online demos. Here is a video:

The Accordion is placed directly inside .user-guide-scroll-container {} with reduced max-height to 30vh for demo purposes.

Check if the fix has not got lost after the upgrade and make sure that it comes after the Radzen's theme css file.