box or column control in aem 6.5

Avatar

Avatar

sreedobe

Avatar

sreedobe

sreedobe

27-12-2020

I have two buttons - aem core component.

button1, button2 these needs to be laid out "side by side" or "left aligned" or "right aligned" or "centered".

 

Does a core container component achieve above scenario? If not , please suggest some ways to achieve above scenario.

 

Thanks,

Sri

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

shelly-goel

MVP

Avatar

shelly-goel

MVP

shelly-goel
MVP

27-12-2020

@sreedobe 

You would not be able to get this functionality as-is in any of the Core Components, and would have to do some customization. 'Button' component displays a single button. 'Teaser' component have the option of adding multiple buttons (CTA) as needed through a multi-field. You can either extend Button component to take button input as multi-field similar to Teaser or simply add necessarily styles (to Teaser component's policy) to display buttons left/ right or center aligned.
Teaser component: https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/teaser.html
Applying Styles: https://helpx.adobe.com/experience-manager/kt/sites/using/style-system-core-components-tutorial-deve...

Tough you could also leverage grid/ layout for placing the button as per the need, it has it's constraints of that the buttons cannot be aligned on a same image (if needed) and requires more grid/ css/ styling work.

Answers (2)

Answers (2)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

28-12-2020

You can create styles for button e.g. left-align, right-align, display-inline etc. and use CSS to render buttons based on specification.

e.g.

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.content/src/main/content/jcr_root/con...

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/a...

 

Avatar

Avatar

KiranVedantam1992

Avatar

KiranVedantam1992

KiranVedantam1992

27-12-2020

Hi @sreedobe,

 

You can achieve your use case by utilizing the concept of layout in editable templates.

 

Open your template and go to the layout mode

Add 2 parsys and arrange them according to your requirement

Place 2 buttons in those parsys and author them as per your requirement

 

Note: These changes affect the pages that are using the template already.

 

KiranVedantam1992_0-1609139044432.png

 

 

Thanks,

Kiran Vedantam.