Sticky Accordion Header

Radzen.Blazor Components
1

Hello,

I use a RadzenAccordion. I want to have Sticky-Headers for the AccordionItems.

In my following code you can see the RadzenAccordion which contains Items which show a Markdown-To-HTML-File.

Until now the PageHeader (Release Notes) and the Buttons are Sticky. The Scrollview of the Accordion has a hight of 72vh under the Pageheader & Buttons. Which looks like this:

grafik
grafik1363×621 12.4 KB

Now when i expand all, it looks like this:

grafik
grafik1507×864 27.7 KB

I want that the head of the AccordionItem is Sticky when I scroll, so that I can see which release note I'm reading.

Here is my code:

<div class="release-notes-scroll-container">
	<div style="display: flex; justify-content: center">
		<div style="width: 80%;">
			<div class="rz-p-sm-12">
				<RadzenAccordion Multiple="true">
					<Items>
						@foreach (var file in _releaseNotes)
						{
							<RadzenAccordionItem Text="@file.FileNameWithoutExtension" Icon="description" @bind-Selected=@file.Selected>
								<MarkdownContent Path="@file.FilePath" IsReleaseNote="true"/>
							</RadzenAccordionItem>
						}
					</Items>
				</RadzenAccordion>
			</div>
		</div>
	</div>
</div>

The CSS:

/* CSS for the Sticky PageHeader and Buttons */
.release-notes-sticky-header-scroll-container {
    position: sticky;
    background-color: white;
    z-index: 10;
    padding-bottom: 20px;
}

/* CSS for the Scrollview for the Accordion */
.release-notes-scroll-container {
    max-height: 72vh; 
    overflow-y: auto;
}

@korchev or @enchev or someone else, how can i do that?

2

We are not aware on how to achieve this.

3

The below works for me. If sticky doesn't work, the main thing is you can't have an overflow on any parent elements. Only overflow:initial; But this simple example works for me locally.

<style>
    .rz-accordion .rz-accordion-header {
        position: sticky;
        z-index:10;
        top:0;
    }
</style>
<div class="rz-p-sm-12">
    <RadzenAccordion Multiple>
        <Items>
            <RadzenAccordionItem Text="Orders" Icon="account_balance_wallet" Selected>
                <p>Details for Orders</p>
                <p>Details for Orders</p>
                <p>Details for Orders</p>
                <p>Details for Orders</p>
                <p>Details for Orders</p>
            </RadzenAccordionItem>
            <RadzenAccordionItem Text="Employees" Icon="account_box" Selected>

                <p>Details for Employees</p>
                <p>Details for Employees</p>
                <p>Details for Employees</p>
            </RadzenAccordionItem>
            <RadzenAccordionItem Text="Customers" Icon="accessibility" Selected>

                <p>Details for Customers</p>
                <p>Details for Customers</p>
                <p>Details for Customers</p>
                <p>Details for Customers</p>
            </RadzenAccordionItem>
        </Items>
    </RadzenAccordion>
</div>

<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
2 Likes
4

THANK YOU @deesnider

That works perfect!

Looks like this:
abc

1 Like
5

No problem. I've been messing around with sticky quite a bit lately and happen to know enough. To be dangerous. :slight_smile: