Equivalent Touch UI class for .cq-wcm-edit | Community
Skip to main content
ashishkhadpe
ashishkhadpe
Level 3
Aug 27, 2020 12:27 PM UTC
Solved

Equivalent Touch UI class for .cq-wcm-edit

Hi All,

 

We have few mark up defined in our CSS library as below in CQ edit mode : 

 

 

.cq-wcm-edit .formBuilder .section.hiddenField,
.cq-wcm-edit .formBuilder .section.hiddenFieldMulti {
    display: block;
}

 

 

I assume that .cq-wcm-edit only works with AEM classic UI. Any help on how we can migrate this to touch UI or any similar class we can use to define.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Nupur_Jain
Nupur_JainAccepted solution
Employee
Aug 27, 2020 12:44 PM UTC

Hi @ashishkhadpe 

 

Just like .cq-wcm-edit, there is a class ". aem-AuthorLayer-Edit" added to <html> node of the page added in iframe in Touch UI mode.

 

You can easily use this class to replace classic based css.

 

 

Hope it helps!

Thanks!

Nupur

View reply

3 replies

arunpatidar
arunpatidar
New Participant
Aug 27, 2020 7:02 PM UTC

you can use .cq-Editable-dom class for touch UI edit mode

e.g.

.teaser.cq-Editable-dom { margin: 10px 0px; }

 

Translate
Arun Patidar
    Suraj_Kamdi
    Suraj_Kamdi
    New Participant
    Aug 27, 2020 12:47 PM UTC

    @ashishkhadpe Hello Ashish you need to use coral classes to achieve the same functionality for touch UI dialogs?

    Translate
      Nupur_Jain
      Nupur_JainAccepted solution
      Employee
      Aug 27, 2020 12:44 PM UTC

      Hi @ashishkhadpe 

       

      Just like .cq-wcm-edit, there is a class ". aem-AuthorLayer-Edit" added to <html> node of the page added in iframe in Touch UI mode.

       

      You can easily use this class to replace classic based css.

       

       

      Hope it helps!

      Thanks!

      Nupur

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...