Any component with the Expander prevents use of css position:sticky #1880

New Issue

claunia · 2026-01-29T17:59:45Z

claunia commented

2026-01-29 17:59:45 +00:00

Originally created by @groogiam on GitHub (Oct 4, 2025).

Describe the bug

I'm running into an issue after updating to V7 that all the sticky functionality in my application no longer works. It seems like this is a side effect of the new animations introduced via the internal Expander component. The extra div with overflow:hidden breaks any use of sticky inside the .rz-expander-content.

.rz-expander .rz-expander-content {
  overflow: hidden;
}

To Reproduce

The following snippet reproduces the issue

<RadzenPanel AllowCollapse="true" class="mb-2 px-1">
    <HeaderTemplate>
        <div id="ap-main-component-header-text"
             title="Command Bar Test">
            Command Bar Test
        </div>
    </HeaderTemplate>
    <ChildContent>
        <div style="height: 2000px">
            <div></div>
            <RadzenStack Orientation="Orientation.Horizontal" Style="position: sticky; top: 0; z-index: 1021;">
                <RadzenButton class="rz-me-1">Command A</RadzenButton>
                <RadzenButton>Command A</RadzenButton>
            </RadzenStack>
        </div>
    </ChildContent>
</RadzenPanel>

Expected behavior
Position sticky should work inside of RadzenPanel and other components that use the Expander.

I believe this can be addressed with some a css tweak to only apply overflow hidden when the panel is collapsed. It looks like I can work around the issue with the following css, but I thought this might be something that can be addressed in this code base as others may run into this in the future. If you don't see any issue with this I would be happy to submit a PR with the change.

.rz-state-expanded > .rz-expander-content {
    overflow: unset;
}

Thanks in advance for your help.

Desktop (please complete the following information):

OS: [e.g. iOS] Windows 11
Browser [e.g. chrome, safari] Chrome
Version [e.g. 22] 142.0.7444.3 (Official Build) beta (64-bit)

Originally created by @groogiam on GitHub (Oct 4, 2025).  **Describe the bug** I'm running into an issue after updating to V7 that all the sticky functionality in my application no longer works. It seems like this is a side effect of the new animations introduced via the internal `Expander` component. The extra div with overflow:hidden breaks any use of sticky inside the `.rz-expander-content`. ```css .rz-expander .rz-expander-content { overflow: hidden; } ``` **To Reproduce** The following snippet reproduces the issue ```razor <RadzenPanel AllowCollapse="true" class="mb-2 px-1"> <HeaderTemplate> <div id="ap-main-component-header-text" title="Command Bar Test"> Command Bar Test </div> </HeaderTemplate> <ChildContent> <div style="height: 2000px"> <div></div> <RadzenStack Orientation="Orientation.Horizontal" Style="position: sticky; top: 0; z-index: 1021;"> <RadzenButton class="rz-me-1">Command A</RadzenButton> <RadzenButton>Command A</RadzenButton> </RadzenStack> </div> </ChildContent> </RadzenPanel> ``` **Expected behavior** Position sticky should work inside of `RadzenPanel` and other components that use the `Expander`. I believe this can be addressed with some a css tweak to only apply overflow hidden when the panel is collapsed. It looks like I can work around the issue with the following css, but I thought this might be something that can be addressed in this code base as others may run into this in the future. If you don't see any issue with this I would be happy to submit a PR with the change. ```css .rz-state-expanded > .rz-expander-content { overflow: unset; } ``` Thanks in advance for your help. **Desktop (please complete the following information):** - OS: [e.g. iOS] Windows 11 - Browser [e.g. chrome, safari] Chrome - Version [e.g. 22] 142.0.7444.3 (Official Build) beta (64-bit)

claunia closed this issue

2026-01-29 17:59:45 +00:00

claunia commented

2026-01-29 17:59:45 +00:00

@akorchev commented on GitHub (Oct 10, 2025):

Hi @groogiam,

The proposed fix disables expand animations. See this gif:

Without overflow:hidden the animation won't work. You can still use this CSS override to support your requirement.

@akorchev commented on GitHub (Oct 10, 2025): Hi @groogiam, The proposed fix disables expand animations. See this gif: ![Image](https://github.com/user-attachments/assets/c924a3d5-3268-4fd7-a90c-d1d123eab531) Without `overflow:hidden` the animation won't work. You can still use this CSS override to support your requirement.

claunia commented

2026-01-29 17:59:45 +00:00

@groogiam commented on GitHub (Oct 10, 2025):

I did not realize that. I will continue to use my override. Thanks for taking a look at it.

@groogiam commented on GitHub (Oct 10, 2025): I did not realize that. I will continue to use my override. Thanks for taking a look at it.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1880