Sticky position

Radzen.Blazor Components
1

Hi everyone
need an advice
I dont find in documentation anything about how to stick element

Main purpose - create content in RadzenTabsItem
Last element RadzenButton must be bottom sticky and visible always

i try add to my component

div.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 0;
}

and set this class to element but it doesnt work
if you have manual for this problem
thks a lot!

2

Hi @Alex_Ti,

Perhaps you can use RadzenStack. This thread should help - Get Button to show BottomRight of a Dialog - #2 by yordanov

1 Like
3

thank you for your answer
ill try :love_you_gesture: and come back with result

4

Unfortunately, this in not what I need
reference W3Schools Tryit Editor
element must be a sticky and other components must be scrollable

in radzentabsItem it does not work and i don't understand why does it happen

5

Position sticky requires a positioned parent element. We haven't seen your code so we can't comment why it doesn't work. Here is what works:

<style>
.rz-tabview-panel {
    position: relative;
}
</style>
<RadzenTabs style="height: 500px">
    <Tabs>
        <RadzenTabsItem Text="Tab">
                <RadzenButton Text="Sticky" style="position: sticky; top: 10px;">
                </RadzenButton>
                <RadzenButton Text="Not Sticky" />
            <div style="height: 2000px"></div>
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>
1 Like