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

[AEM 6.5] Experience Fragment adding a horizontal scroll bar to the page due to OOTB content.css

Avatar

Avatar
Level 1
Sudeshna1992
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
Sudeshna1992
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
View profile
Sudeshna1992
Level 1

22-09-2020

Hi team,

 

I have added XF component to a page and after giving the variation path to it, it is adding an extra margin to the XF component, due to which a horizontal scroll bar is getting added as shown in the screenshots below.

The margin is coming up from the OOTB CSS

Path: /libs/cq/experience-fragments/components/xfpage/content.css

Class name: xf-content-height

 

If we remove the margin , the issue will resolve. But I wanted to know what is the use of this class in /libs/cq/experience-fragments/components/xfpage/content.css and how to restrict the usage of the CSS for XF when any variation is added.

 

 

Sudeshna1992_0-1600760362234.png

 

 

 

Sudeshna1992_1-1600760701769.png

 

Sudeshna1992_2-1600760759329.png

 

 
 

image.png

 

 

 

 

image.png

 

@kautuk_sahni  @Vijayalakshmi_S @Theo_Pendle @Arun_Patidar @BrianKasingli 

aem6.5 content fragments Experience Fragments OOTB CSS page Touch UI

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

605 posts

Correct Reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

605 posts

Correct Reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

22-09-2020

@Sudeshna1992,

When dealing with XF, its good practice create and overlay your own xf base page (/apps/my-site/components/structure/xfpage). This gives flexibility to overlay existing scripts and files without doing tricky things like overwriting CSS or JS for the resources & components within /libs. 

At a glimpse, /libs/cq/experience-fragments/components/xfpage/content.css looks like styles Adobe added to enhance the authoring experience or to ensure that the component has a min-height... looks to me that content.css is not significant, and will not cause any broken behavior, so your own xf base page, and overlay .content.css, and leave this file empty. 

I hope this helps.

Answers (1)

Answers (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

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

22-09-2020

I would not recommend to overlay just to remove margin. If it is only in edit mode then you can ignore, if you see extra padding in publisher then handle it using extra CSS specific to your project.