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 .
The WKND tutorial discusses creating some author-only client libraries as well: Getting Started with AEM Sites Part 3 - Client-Side Libraries and Responsive Grid and aem-guides-wknd/customheaderlibs.html at master · Adobe-Marketing-Cloud/aem-guides-wknd · GitHub . To reiterate this is a workaround and the editing vs. publish experiences may not be identical for your site.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.