I need vh units for displaying images with height equal to view port. As per AEM 6.3 touch ui limitations, vh units aren't supported. Hence I have overwritten vh units with % unit for wcmmode = edit. But still vh and % units behave very differently on different devices and screen sizes. Hence I need something better than % units. Is there any other way to work with vh units?
In some cases, due to the AEM sites editor rendering the page in an iframe, certain CSS/JS is not compatible. It seems that you are running into that when using vh units. The work around is to have a small amount of CSS that is only loaded on the Authoring environment (wcmmode=edit / preview). This can facilitate the authoring experience but you can continue to use whatever CSS rules you want for the publish experience.
This is the technique used for AEM screens since with screens most of the components take up the full screen: Creating Components .
I was talking to our support ppl about this. There is no support for this OOTB. Have you tried to build a custom component using libs that supports this. See if you can build a component using Bootstrap that can handle your requirements.
In some cases, due to the AEM sites editor rendering the page in an iframe, certain CSS/JS is not compatible. It seems that you are running into that when using vh units. The work around is to have a small amount of CSS that is only loaded on the Authoring environment (wcmmode=edit / preview). This can facilitate the authoring experience but you can continue to use whatever CSS rules you want for the publish experience.
This is the technique used for AEM screens since with screens most of the components take up the full screen: Creating Components .
