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

5 replies
3812 views
Translate

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Daniel_GordonAccepted solution

Employee

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.

yogeshVaidyaAuthor

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.

Translate

Daniel_GordonAccepted solution

Employee

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.

Translate

smacdonald2008

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.

Translate

smacdonald2008

Level 10

I am checking internally here.

Translate

nipuns

New Participant

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

Translate

Sign up

Login with SSO

Login to the community

Login with SSO