How can I make a group 100% of the viewport height?

I want to make a pre-loader for my app and I am wondering how I would center the loading icon in a group that is 100VH?

Hello! On our new responsive engine, if you create a group and set the max height to “infinite” (leave the input empty) and make sure that you have “fit height to content” unchecked, the group should expand to 100VH.

Keep in mind that all groups will be constrained by the settings of their parent groups as well, so if you feel like you’ve set it up this way and it still isn’t working, check the nesting of the element within your elements tree.

1 Like

I just installed the “Toolbox” plugin and dragged in an HTML element. Then paste this into the HTML element:

<style>
.contents {
    height: calc(100vh) !important;
   overflow-y: scroll !important;
    }
</style>

Then go to your app settings in the General tab and enable “Expose the option to add an ID attribute to HTML elements”, then go back to your group you want to be 100VH and scroll all the way to the bottom in the “ID Attribute” field and put {addClass: "contents"}

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.