Mobile - manipulating block height in varying screens

Hello everyone,

I am developing a mobile app at the moment and am having some issues with a reusable block that I have on several screen.

The block houses a list, and the user enters data to populate that list, however, I want the list to stack on top of the bottom bar when it reaches a certain height.

What I've Done:

I've set the overflow and max-height so the block is displayed the way I want on ONEscreen, but my main issue now is that the max-height settings work great on one screen but not on other screens the block is used on.

1) So say I set the max-height to 45vh, that initially works well on one screen, but then if I navigate to another screen, that max-height is too big and the screen doesn't stack neatly on the bottom bar (because other information takes up the screen, and the list grows past the bottom bar).

2) Tried wrapping the block in a container, and setting max-height to another vh value, but that didn't seem to have any effect.

Any suggestions welcome,



Are you setting the vh in the css of every screen?


J. wrote:

Are you setting the vh in the css of every screen?

Do you mean by wrapping the block in every screen and setting a max-height vh value? No I haven't done that yet, but will try and see if that makes a difference.

I would say that the webblock always has height 100%, and each page controls it's parent by a different class/style.

Alternatively, you can add an input parameter to the webblock and set it's height to each page by using inline styling. Something like the following:

Hope it helps

Thanks for the help, I got it working by setting max-height to a vh unit consistently across screens and fiddling with some IF statements.