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

How to configure component to use whole width of parent layout container

Avatar

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pieter-jand5817
Level 1

22-05-2018

Our content editors are facing the following issue:

  1. they create a content page with 3 layout containers, each 4 columns wide, for the desktop variant. They drop in a title component and it takes the full width of the container
    1492364_pastedImage_5.png
  2. Next they configure the layout for mobile devices. Each column is now the full 12 columns wide.

The issue is now that the title component is now still 4 columns wide, while the editors want the title component to use the whole width (so 12 columns) automatically. So they basically want to define the width of the title to 'take up all the available width as defined by the parent container'.

1492365_pastedImage_6.png

I've been wrapping my head around this for quite a while and haven't come up with a solution yet.

Looking forward for any suggestions!

Kind regards,

Pieter-Jan

Replies

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,356 likes

Total Posts

3,227 posts

Correct Reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,356 likes

Total Posts

3,227 posts

Correct Reply

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

22-05-2018

Hi,

Can you please check your CSS, may be your custom CSS overriding the normal behaviuor.

you can do inspect elements and check the column and title components CSS rules.

Avatar

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pieter-jand5817
Level 1

22-05-2018

It seems the default aem grid css classes are assigned

1492610_pastedImage_0.png

What I forgot to mention are the values in crx/de: as you can see on the below screenshot, the tiny layout valuefor the width property is set to 4 columns wide, just as in the default node. I'll update the original question as well

1492611_pastedImage_2.png

Pieter-Jan

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

22-05-2018

As an AEM Dev - you can also create custom grid container via Bootstrap to get the flexibility that you want -- Creating a custom Touch UI Grid Component for Adobe Experience Manager

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

23-05-2018

When you change layout in Desktop mode and switch to mobile mode, then mobile mode would try to keep things similar to desktop mode. But you can change layout in mobile mode and when you resumes back to desktop mode, changes would persist.

So, to answer to your question on "editors want the title component to use the whole width (so 12 columns) automatically" I would say they have to edit this again on mobile mode then changes would persist.

-Kautuk

Avatar

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pieter-jand5817
Level 1

24-05-2018

Reading your response, makes it clear I haven't stated the problem properly.

Indeed, the authors can edit the page again for mobile and that is their current way of working. This is actually the step they want to avoid doing on all te pages. In their mind, the title component should take up all available width, no matter if the parent container is 4 or 12 columns wide.

So the question is: how to achieve this behaviour, while still developing components according to best practices of responsive component development in AEM.

Pieter-Jan

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

24-05-2018

If the parent layout - say a grid column is 4 wide - then the child component will be restricted to that width.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

24-05-2018

If they want a Title component go be full width - why not drop it above the responsive grid as opposed to a column in the grid?

Avatar

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
pieter-jand5817
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
pieter-jand5817
Level 1

28-05-2018

What the authors want is the title component to take the fullwidth of the parent container, but without actually having to drag and drop the blue handles in the layouting mode

Their page creation flow starts with the desktop layout, creating 3 containers next to each others, each with a title component taking up the whole width of the parent. This happens automatically

The next step they create the mobile layout by  stacking the 3 original containers on each other. Authors now expect that, given the title component took up the whole width before, it automatically does as well in the mobile layout. In reality, it is 4 columns wide, the same widt as in the desktop layout.

It is hard to precisely write this down, I'll try to reproduce this with a screencast/snapshots

Kr,

Pieter-Jan