Hi forums,
As of 2024 CSS supports new height properties DVH, SVH and LVH. In general, my opinion is that using custom CSS in a Bubble app is not a great practice in most cases because it’s hard to maintain and it can conflict with future Bubble releases. However, these new CSS properties can be used to solve a common headache which is making an element take up the full height of the user’s viewport. The vh unit notoriously didn’t work as expected on Apple’s Safari browser because the unit considered the browser’s searchbar to be part of the viewport height sigh…
Anyways, if all you need is a group like a loading group to be fullscreen than why not use one line of CSS to make your app feel a lot more polished. Here’s an excerpt of Demystifying VH, DVH, SVH, and LVH in CSS from learnbricksbuilder.com
2. DVH: Dynamic Viewport Height
DVH, or dynamic viewport height, is a newer unit that adjusts according to changes in the viewport size. It reacts to events like window resizing or device rotation, keeping your layout consistent.
While this flexibility can be incredibly useful, it has its challenges. For example, as elements on the screen come and go, the layout will dynamically resize, leading to undesirable flashes as the layout changes.
Example:
CSS
div { height: 50dvh; }Practical Use:
DVH is ideal for elements that need to maintain size or position relative to the viewport, even when it changes.
3. SVH: Static Viewport Height
SVH stands for static viewport height, which refers to 100% of the viewport height, irrespective of size. It ensures that an element covers the full height of the viewport, creating a fullscreen effect. SVH differs from DVH in that it assumes that elements like the address bar, etc., are not being displayed and, therefore, removes the auto-resizing issues present in DVH.
In most instances, SVH offers a more consistent approach to handling the height of your content onscreen but may also have some content obscured when additional elements appear onscreen – things like your address bar, etc.
Example:
CSS
div { height: 100svh; /* This sets the div to always occupy the full height of the viewport */ }Practical Use:
SVH is excellent for creating full-screen sections or backgrounds that cover the entire viewport.
4. LVH: Line-height Viewport Height
LVH, or line-height viewport height, allows you to set the line-height property relative to the viewport height. This is particularly useful for vertical text alignment.
Example:
CSS
p { line-height: 10lvh; /* This sets the line height relative to the viewport height */ }Practical Use:
LVH is excellent for controlling text layout, especially in large hero sections or banners where text needs to be vertically aligned.
I hope this can come in handy for many of you
Cheers