Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Touch UI CSS class

Avatar

Level 4

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.

 

Thanks in advance. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

I would say first you check the purpose of this CSS class why they have added in classic UI. 

And then to implement the same for Touch UI dialog.

There could be a case where you might not need this in touch UI dialog or there could be a different way to serve the purpose. 

 

 

View solution in original post

6 Replies

Avatar

Correct answer by
Community Advisor

I would say first you check the purpose of this CSS class why they have added in classic UI. 

And then to implement the same for Touch UI dialog.

There could be a case where you might not need this in touch UI dialog or there could be a different way to serve the purpose. 

 

 

Avatar

Level 4
As I can see that they are trying to hide some components being shown on page except edit mode. I understand that this is not a correct implementation but we are reluctant to modify the component. We are looking for a CSS solution to tackle this.

Avatar

Community Advisor

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

Avatar

Level 4
Hi Nupur_Jain Thank you so much. It worked. Will you be able to look at : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dialog-not-appearing-in-to... as well. I guess that also requires similar solution.

Avatar

Community Advisor

Hi @ashishkhadpe,

In touch UI, WCM mode is known as layers and the same is saved in cookies in the name "wcmmode". We should listen to the event named - cq-layer-activated -> get the cookie value -> write CSS via jQuery targeting specific layer (In this case, it is Edit)

Sample script for reference:

 $(document).on("cq-layer-activated", function(){
		var wcmmodeVal = $.cookie("wcmmode");
        console.log("WCM Mode = "+wcmmodeVal);
        if(wcmmodeVal == "edit"){
        	$(".cq-droptarget").css("border", "2px solid red"); // Target your desired class and write CSS accordingly
        }

    });