box or column control in aem 6.5

[sreedobe]

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

[shelly-goel · Accepted solution]

@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.

[Kiran_Vedantam]

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.

Thanks,

Kiran Vedantam.

[arunpatidar]

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...