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

Custom Layout Container - Resize-able Area

Avatar

Avatar
Validate 1
Level 3
robinsonm
Level 3

Likes

6 likes

Total Posts

50 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
Level 3
robinsonm
Level 3

Likes

6 likes

Total Posts

50 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile
robinsonm
Level 3

01-04-2019

This is difficult for me to articulate, so I'll do the best I can.

I want to extend the layout component to add some additional properties (BG color, ability to provide an anchor, etc). The tricky part I am running in to is I want the component to extend 100% of the viewport, but the inner content to have a max-width. However, I want the responsive grid to only be contained within that max-width, and not the width of the entire component. I've illustrated it the best I could in the attached screenshot.

The entire layout component is the red background, but the text component inside, which is conforming to the max-width, is bound to the layout's 100% width grid. I would like for the grid to be contained inside of the 2 black lines.

grid.png

View Entire Topic

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

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

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

03-04-2019

Hi matthewr46705702

Another approach is to actually have two layout containers. The outer layout container is the full-width w/ colored background and the inner layout container is a fixed-width (no background). The inner layout container will have the grids appropriately and you won't have to have some crazy CSS w/ negative margins. The downside is now you have to author two layout containers...

multiplecontainers.png

If possible I would try to do everything with the Style System. Supertyping the Layout container will mean you will have to maintain this custom component long term through upgrades, although having a background image might be difficult w/ Style System alone.

FWIW the Core Component team is planning on moving the Layout Container into Core Components in the future and others have requested background capabilities. This doesn't help you in the short-term but something to keep an eye out for: [RTC] Container Background · Issue #507 · adobe/aem-core-wcm-components · GitHub