Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Workaround for vh units in aem 6.3 (touch ui editor)

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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.

View solution in original post

5 Replies

Avatar

Level 1

I am facing the same issue. Please post a workaround if you find one!

Avatar

Level 10

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.

Avatar

Correct answer by
Employee Advisor

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.

Avatar

Level 2

Hi dgordon86​,

As of now, I have tried the same as you have stated(as mentioned in the question's description)

I have used % units in edit mode and vh units otherwise.

As you are saying, the editing v publishing experience isn't same.