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

Live demo example of multiple layout containers: Pinnacle Finance (view the source and search for the class fsi-container--highlight to find the outer layout container and cmp-layout-container--fixed for the nested fixed width layout)