AEM 6.4 - Pages are getting infinite height - Touch UI

[ashishkhadpe]

Hi All,

After migrating to touch UI, we observed that few pages are getting infinite height added.This seems to be popular issue while migrating from classic UI to touch UI. It is I guess due to our CSS files have height defined for few elements in vh, position absolute +  height 100% which really doesn’t go with touch UI. Touch UI has a class ContentWrapper for which the height gets calculated in – “/libs/cq/gui/components/authoring/editors/clientlibs/core/js/ContentFrame.js” and it depends upon css for all components in page.

I tried multiple solutions people have used online but most of them are either not working or hiding some other content. As per my knowledge the best solution will be to get ride of vh, position absolute +  height 100% in our CSS but that involves lot of efforts from frontend team. Anyone here can suggest me a better and quick solution on this?

[Vaibhavi_J]

Hi @ashishkhadpe , 

I have faced the exact issue. 

Like you said , as touch ui dynamically calculate the height where viewport height is not accurate and pages sets to infinite height. But this can't be specifically controlled in AEM. Since vh is more accurate on fixed height. So we do not see the same issue on classic ui. 

Only option is you need to replace the vh with alternative css. I understand the pain point here, as it involves design change. Try if you can use em which is almost close or absolute with 100% height is another option too. 

[Ravi_Pampana]

Hi,

Check this post

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-4-touch-ui-the-heigh...