Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

TouchUI Placeholder height incorrect

Avatar

Level 2

We are currently using the Classic UI and preparing to migrate to Touch UI.
During this we observed, that the height of the placeholders of our components or the drag and drop area looks incorrect. If we compare to we-retail example pages, the issues does not happen there.

 

Correct on We-Retail:

1-example_correct_height_we-retail.png

 

Wrong height in our pages:

 

3-example_of_wrong_height_by_Hapag-Lloyd.png

 

Technical investigation showed, that the height of the placeholder is 28,75px instead of 40px in we-retail. The div height is calculated and set as inline style.

 

Contacts to Adobe Consulting showed, that this happens also for others. But has anyone solved the same behavior?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Timo_HH 

It mainly happens because of CSS when div tag contains global styling as follows.

 

 

 

div{
   height: 100px;
}

 

 

try to apply class-specific CSS to avoid such issues.

 

or you can also write some custom CSS for clientlib categories named cq.authoring.editor.core

 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@Timo_HH 

It mainly happens because of CSS when div tag contains global styling as follows.

 

 

 

div{
   height: 100px;
}

 

 

try to apply class-specific CSS to avoid such issues.

 

or you can also write some custom CSS for clientlib categories named cq.authoring.editor.core

 

Avatar

Level 2

@Suraj_Kamdi, thanks for that hint.

We found with that idea that the global font definition has influence on the placeholder height:

 

html {
font-family: Arial;
font-size: 62.5%;
}

 

So font-size: 62.5% reduces the height of the placeholders accordingly.

Avatar

Level 1

Someone found a solution keeping font-size on html tag? I need to keep that but in that case placeholders have a wrong height. I think the placeholder should have a stand-alone graphic not related to root tag.