Setting device dependant container heights

Hey guys,

I’m hoping to understand how to achieve the View Height (VH) and View Width (VW) equivalent within AppGyver?

I’ve gotten “systemVars.dimensions.screen.height” but having difficulty understanding if this is the right formula for calculating the VH.

Many thanks for the help!

Hi!

What are you trying to do? If you want something to be the height of the screen, there’s a better way to do that with flex properties, such as setting the page to stretch to viewport height and making a container flex grow 1.

You can also test if systemVars.dimensions.screen.height or systemVars.dimensions.viewport.height does what you want better. My bet is on the viewport height.

Hey Mevi!

I’m trying to divide the page into having set heights. For example, I don’t want to allow for scrolling so the content should take up 100% of the device height. My three container would all then take up a set percentage of that 100%. Container 1 = 25%, Container 2 = 50%, Container 3 = 25% regardless of the device size.

Normal in CSS i’d set these as 100vh - Container 1 = 25vh, Container 2 = 50vh, Container 3 = 25vh

I hope that gives a better idea of the overall idea.

Hi!

So the set-up would be as follows: under Page Layout > Style > Advanced, set disable scroll and stretch to viewport height.

Screenshot 2020-09-29 at 9.27.13

Then Set Container 1 to flex grow 1, Container 2 to flex grow 2 and container 3 as flex grow 1. Or you can directly set their heights as 25% 50% and 25%, that might work as well. Or at least if you put them inside a container with flex 1 it should work.

Hey Mevi,

Sorry, I went silent here, I was exhausting all my mental energy on a project for work and haven’t had a chance to jump back into this.

I’ve seen your constant replies and assistance to everyone within this forum so I’m sure the solution you provided was perfect. Thank you so much for helping me slowly understand AppGyver and building apps in general!

1 Like

Ah, thank you very much for your trust! Hopefully the solution works for you. I hope you’re taking care of yourself the best you can :relaxed:

1 Like

It worked perfectly! Thank you so much for the assistance on this.

1 Like