Equivalent Touch UI class for .cq-wcm-edit

Avatar

Avatar
Validate 1
Level 2
ashishkhadpe
Level 2

Likes

4 likes

Total Posts

50 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 2
ashishkhadpe
Level 2

Likes

4 likes

Total Posts

50 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 3
Boost 1
View profile
ashishkhadpe
Level 2

27-08-2020

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

27-08-2020

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.

 

Screenshot from 2020-08-27 18-13-35.png

 

Hope it helps!

Thanks!

Nupur

Answers (2)

Answers (2)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

27-08-2020

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

e.g.

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

 

Avatar

Avatar
Seeker
MVP
Suraj_Kamdi
MVP

Likes

148 likes

Total Posts

159 posts

Correct reply

42 solutions
Top badges earned
Seeker
Bedrock
Engage 1
Springboard
Validate 1
View profile

Avatar
Seeker
MVP
Suraj_Kamdi
MVP

Likes

148 likes

Total Posts

159 posts

Correct reply

42 solutions
Top badges earned
Seeker
Bedrock
Engage 1
Springboard
Validate 1
View profile
Suraj_Kamdi
MVP

27-08-2020

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