Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

CSS gap when the component is locked in edit mode

Avatar

Avatar
Validate 10
Level 3
deepakt84913413
Level 3

Likes

6 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 3
deepakt84913413
Level 3

Likes

6 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
deepakt84913413
Level 3

29-07-2019

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

Edit mode.png

PREVIEW mode

Preview mode.png

Thanks for the help.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,355 likes

Total Posts

3,227 posts

Correct Reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,355 likes

Total Posts

3,227 posts

Correct Reply

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

29-07-2019

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>

Answers (0)