Css position: fixed not work

Andrey_Ya · February 15, 2023, 9:26pm

Hi!

The Description of problem
gitlink

Maybe you should reconsider RadzenLayout ,
because we lose the ability to create our own fullscreen elements, windows,,,
as full screen picture viewer or own modal windows?

How I can create fullscreen picture viewer?

Thanks.

enchev · February 16, 2023, 5:07am

You can check how our dialog works for reference.

korchev · February 16, 2023, 6:31am

Try the following:

Set the style of your RadzenBody like this <RadzenBody style="transform: none">
Set the z-index of your fixed element to 2 or more <div style="position: fixed; top: 0; left: 0; z-index: 2;width: 100%; height: 100%"></div>

Then it should work as expected:

The cause of the issue is that RadzenBody has transform: translateZ(0) which for some reason acts as position: absolute. As a result all fixed children of RadzenBody are positioned according RadzenBody itself and not the browser viewport. We needed this translateZ(0) as a fix for some animation flickering. Setting style="transform: none" overrides translateZ and restores the stacking order.