CSS gap when the component is locked in edit mode | Community
Skip to main content
deepakt84913413
deepakt84913413
Level 4
Jul 29, 2019 3:15 PM UTC
Solved

CSS gap when the component is locked in edit mode

I created a template with a layout container and included a text component in the template. I Added text to the component and locked the component since I want all the pages to import the same text. But when the pages are in edit mode, there is a huge gap between this text and the next component, however in preview this gap does not exist. How do I make sure the gap does not exist in edit mode as well. Attached are the screenshots for it.

EDIT mode

PREVIEW mode

Thanks for the help.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Jul 29, 2019 4:10 PM UTC

This could be possible because edit mode contains extra DOM element to support editing and your UI code may be impacted by those although you can add extra classes in WCM edit mode  and with the help of extra classes you can handle it.

<div data-sly-test.author="${wcmmode.edit || wcmmode.design}" data-sly-unwrap></div>

<div class="row ${author ? author_row  : '' }">

  //

  //

</div>

Arun Patidar
View reply

1 reply

arunpatidar
arunpatidarAccepted solution
New Participant
Jul 29, 2019 4:10 PM UTC

This could be possible because edit mode contains extra DOM element to support editing and your UI code may be impacted by those although you can add extra classes in WCM edit mode  and with the help of extra classes you can handle it.

<div data-sly-test.author="${wcmmode.edit || wcmmode.design}" data-sly-unwrap></div>

<div class="row ${author ? author_row  : '' }">

  //

  //

</div>

Translate
Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...