Display hidden component in editor mode | Community
Skip to main content
L
lax50
April 22, 2025
Solved

Display hidden component in editor mode

  • April 22, 2025
  • 1 reply
  • 798 views

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.

Best answer by arunpatidar

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 ?

 


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 

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
April 22, 2025

Hi @lax50 

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 

Arun Patidar
    L
    lax50Author
    April 22, 2025

    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
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    April 22, 2025

    HI @lax50 

    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; }
    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...