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

A Container Doesn't Snap to Columns

Avatar

Avatar
Level 1
AEMStu
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
AEMStu
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
View profile
AEMStu
Level 1

26-03-2021

Hi,

I am using AEM 6.5.  I have a problem to layout containers.
I have a title, body and a button netted inside 2 containers (as image 1 below).  I want to make the outmost container smaller by dragging a blue dot. 

The problem is wherever I drag, the container moves back to where it was, it doesn't snap to the columns layout! For example, it was in column 1, I drag it to column 4, then it moves back to column 1 by itself (second image).

 

I already have app.ui.apps0.0.1-SNAPSHOT.zip installed

 

How can I get a container snapped to the columns layout?
In order to get a container snapped to columns, should I have to have double containers set up like this?  or can I have only one container?

Please give me a hand.  Thanks

 

AEM1.jpg

 

AEM2.jpg

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct Reply

206 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct Reply

206 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

28-03-2021

Hi @AEMStu 

Please update the core component dependency version to latest (currently 2.15.2) and re-validate.

Please look for the following dependency in pom.xml

 

<dependency>
<groupId>com.adobe.cq</groupId>
<artifactId>core.wcm.components.core</artifactId>
<version>2.15.2</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.adobe.cq</groupId>
<artifactId>core.wcm.components.all</artifactId>
<type>zip</type>
<version>2.15.2</version>
<scope>provided</scope>
</dependency>

https://github.com/adobe/aem-core-wcm-components/releases/tag/core.wcm.components.reactor-2.15.2 

 

Thanks!

AEMStu

Thank you, Arun!
Currently in my local I have:

core.wcm.components.content-2.3.2.zip core.wcm.components.config-2.3.2.zip core.wcm.components.all-2.3.2.zip core.wcm.components.extension.contentfragment.content-1.0.12.zip core.wcm.components.extension-1.0.12.zip core.wcm.components.examples-2.3.2.zip

And from the link you provided, there are:

core.wcm.components.all-2.15.2.zip
core.wcm.components.core-2.15.2-javadoc.jar
core.wcm.components.examples.all-2.15.2.zip
core.wcm.components.extensions.amp-2.15.2.jar
core.wcm.components.extensions.amp.content-2.15.2.zip

Is it ok if the update version doesn't have what I have in my local?  For instance, my local has  core.wcm.components.extension.contentfragment.content,  core.wcm.components.config, but the new version doesn't.

Please let me know.  Thanks!

AEMStu

Hi Arun, another concern: I don't have dependency as you mentioned in pom.xml, but I have <groupId>org.apache.sling</groupId>, so I copy and paste the 2 blocks of dependencies you provided into my pom.xml. Then here is what I updated:

core.wcm.components.extensions.amp.content-2.15.2.zip
core.wcm.components.examples.ui.content-2.15.2.zip
core.wcm.components.examples.ui.apps-2.15.2.zip
core.wcm.components.examples.ui.config-2.15.2.zip
core.wcm.components.config-2.15.2.zip
core.wcm.components.content-2.15.2.zip
core.wcm.components.all-2.15.2.zip

I try to move containers around, but somehow they still don't snap on the columns!
Do you know why?  Thanks
asutosh_jena

@AEMStu Can you please check if your grid.less file is present within your base clientlib and the file is included in css.txt

Also make sure that the file is loading as expected. You can use the debug mode to check the clientlibs are loading or not.

If possible can you please share the grid.less file?

 

Thanks!

AEMStu

Thanks, Arun!
I checked and saw grid.less is included in css.txt.
Here is my grid.less:

.aem-Grid {
.generate-grid(default, @max_col);
}
@media (min-width: 1200px) {
.aem-Grid {
.generate-grid(lg, @max_col);
}
}
@media (min-width: 992px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
I inspected and it loaded as expected.  I wonder why it is not snap into columns, yet!
Arun_Patidar

I think if I understand you correct, OOTB and core grid css follow the grid layout, means the layout is floating from left to right. If does not do right float. to achieve this you can add styles to the layout container, and write css for those class with float right or any other custom css rules.

Please provide gif or video to explain problems, so that we can assist better.

AEMStu

Hi Arun, I am wondering how did you know " the grid layout, means the layout is floating from left to right" when you looked at my grid.less?  I am curious. Does that mean I have to layout containers from left to right and from top to bottom?

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

28-03-2021

Hi,

Which version of core components are you using? there was an issue with responsiveness with core container component with layout mode.