Display hidden component in editor mode

[Sanj123]

Hi All,

I have hidden 2 component for the tablet layout  but after hidden component  disappeared from the view .

is there anyway to show Author/Editor display hidden component in the editor mode so that they can able to see those 2 component is hidden.

[arunpatidar]

Hi @Sanj123 

You can check it from content tree

If you want to show the component content as well then use CSS to show the component in the editor view.

Please check https://sourcedcode.com/blog/aem/targeting-css-in-the-editor-html-for-aem-components-for-aemaacs 

[Sanj123]

Hi @arunpatidar ,

Thanks for the response.

AEM Authoring team know about the content tree option but they want display text option 

example:

I have hidden text component  in the layout medium breakpoint  and in the edit mode of medium breakpoint display text like component hidden.

is there anyway we can  achieve it.

[arunpatidar]

HI @Sanj123 

You can add additional css which doe snot hide the component in the EDITOR mode

example

/* Edit Mode */
.aem-AuthorLayer-Edit .my-component {
   display: block;
}

/* Preview Mode */
.aem-AuthorLayer-Preview .my-component {
   display: block;
}

/* Layout Mode */
.aem-AuthorLayer-Layouting .my-component {
   display: block;
}

[Sanj123]

Hi @arunpatidar ,

Is there any way to show author/editor people to know that this component is hidden if they switch to the breakpoint where the component hidden.

example: I hide title component in medium breakpoint and whenever the author/editor goes to edit the page in the medium breakpoint so he/she can able to see text  'title component hidden'

Is this possible ?

[arunpatidar · Accepted solution]

With CSS you can add pseudo element and shows the title for hidden components.
Or change you component logic to always add Component Title(only in EDIT mode) which says 'Component A is hidden' and show this when the actual component content is hidden