Has anyone also trouble by creating a 100% width and 100% heigtht pop up? I want loading create a loading simulation with a popup, but there is a small top margin. The page has Colum n as container Layout. Marign & paddings of all sub and parent containers are 0. Has anyone an idea? thanks!
Popup elements have a margin by design. I’d suggest using a full width/height Floating Group instead. You won’t be able to close it by pressing escape, but that shouldn’t be an issue with a loading indicator.
-Steve
EDIT
Just FYI, to make a Floating Group cover the viewport, just make sure it has no max height or width - i.e. that max height/width are set to “inf”. That is, the dimensions needn’t be set to 100%.
1 Like
Thank you @sudsy ! You proposal works well. The only disadvantage is the missing grayout - blur option (that gives you a nice look and feel). It is only available with popup elements. Maybe I can inject some css for the floating group.
Ah yes, good point. For that, just add an id to the Floating Group - e.g. “overlay” or some such - and target it with CSS…
#overlay {
backdrop-filter: blur(2px) !important;
}
Change the 2px value to whatever blur radius you want. The CSS should ideally be at the page or app level, but you could also add an HTML element to the page and add the CSS to it inside a <style> tag.
EDIT
It seems Firefox doesn’t support the backdrop-filter property, so a more cross-browser way to do it might be to blur the whole page conditionally - i.e. only when the Floating Group is visible…
The above works in both Firefox and Chrome.
works perfect! thanks a lot for your help.
1 Like