Page 1 of 1

Flex Container responsive design

Posted: Sat Jun 09, 2018 8:47 pm
by Dynonxp
I have recognized a Problem by using of FlexBox Container and responsive design. In the WB version 12.5.2 I used the FlexBox Container with the setting: General -> Miscellaneous -> Size -> viewport height - and everything was Ok.

After the migration to WB 14 – it is not working properly (FlexBox does not cover the whole viewport and the setting: General -> Miscellaneous -> Height -> 100vh is ignored). I made a small research and found out, that without responsive design (break points) it works properly. After adding some breakpoints - WB generates in CCS for these sections “min-height: 0; instead of min-height: 100vh; which would be probably correct.

What I am doing wrong please?

Re: Flex Container responsive design

Posted: Sun Jun 10, 2018 7:04 am
by Pablo
WB generates in CCS for these sections “min-height: 0; instead of min-height: 100vh; which would be probably correct.
The reason why this was added is because in most cases full height is not desired on smaller screens. The content may be taller than viewport in which case it would be clipped or overlap other objects.
So, this is an intentional change, after feedback from users.

If you want to overwrite this behavior then you can add the following code between the head tags of the page HTML:

Code: Select all

<style>
#FlexContainer1
{
   min-height: 100vh !important;
}
</style>

Re: Flex Container responsive design

Posted: Sun Jun 10, 2018 4:54 pm
by Dynonxp
Ok, thank you very much for the solution!

Re: Flex Container responsive design

Posted: Tue Jun 02, 2020 10:44 pm
by cesmarvas
Hola Pablo.


You can add an option (check) if we want to use 100vh on all screen sizes.

It would be very useful.

Thank you