Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Out of Box Column control is not working in AEM 6.4

Avatar

Level 4

Dear All,

I am trying to use the OUT of Box Column Control in AEM 6.4 in the WKND sites , by following the below steps.

But it is not coming fine means , in the drop down it is not coming anything . I am following the below steps.

1) I go the WKND editable template (http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd ) , as shown below and created the sunitacolumncontrol , as shwon below.

1646901_pastedImage_1.png

1646903_pastedImage_2.png

1646905_pastedImage_4.png

2) Then I have opened the sunitaColumnControl template (http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/sunitacolumncontrol/structure.htm...  ) and added the column control in Layout container and enable it , as shown below.

1646910_pastedImage_8.png

3) Then I have created the page in sites by using the sunitacolumncontrol template (http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd ) , as shown in below steps.

1646911_pastedImage_11.png

1646919_pastedImage_14.png

4) Now I am trying to edit the page , as shown below and it is not coming fine.

1646920_pastedImage_15.png

Can you please let me know , If I have missed anything ?

1 Accepted Solution

Avatar

Correct answer by
Level 10

I Strongly recommend to install the package for this part of the tutorial. You will see it working. Then compare that solution with what you have done.

View solution in original post

8 Replies

Avatar

Level 2

Please add the grid.less file to your client library to make it happen.

@import (once) "/etc/clientlibs/wcm/foundation/grid/grid_base.less";

/* maximum amount of grid cells to be provided */

@max_col: 12;

/* default breakpoint */

.aem-Grid {

  .generate-grid(default, @max_col);

}

/* phone breakpoint */

@media (max-width: 768px) {

  .aem-Grid {

    .generate-grid(phone, @max_col);

  }

}

/* tablet breakpoint */

@media (min-width: 769px) and (max-width: 1200px) {

  .aem-Grid {

    .generate-grid(tablet, @max_col);

  }

}

Reference :: Configuring Layout Container and Layout Mode

Avatar

Level 4

Dear All, I have followed the below steps mentioned in the below document Configuring Layout Container and Layout Mode But still I am not able to resize the Text in layout , as shown below.

1648749_pastedImage_0.png

I have put my files in my git hub repository in below.

GitHub - sunita197881/sunitatest1 at MCK-AEM-6.4

My grid.less file is under below .

1648750_pastedImage_2.png

Avatar

Correct answer by
Level 10

I Strongly recommend to install the package for this part of the tutorial. You will see it working. Then compare that solution with what you have done.

Avatar

Level 10

Another thing - Danial said this has been updated to 6.4.2.  You need to have that Service pack. (I will test this too)

Another way is to build a custom grid component that uses bootstrap. This lets you place components in columns too. See this.

Scott's Digital Community: Creating a custom Touch UI Grid Component for Adobe Experience Manager

Avatar

Level 4

Thanks Scott. After I copied the files from the WKND exercise , it is working fine. I observed the below difference. 1) I include embed and it is working fine. But still now I did not get fully understand the use of embed. Can you please let me know why we use embed.

1648770_pastedImage_0.png

Avatar

Level 2

Several Core Components come with client libraries that need to be included on the page in order for the component to function properly.