Place component placeholder to the right of the existing component

Avatar

Avatar
Validate 1
Level 2
dennyj13354090
Level 2

Likes

8 likes

Total Posts

27 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back
Boost 5
View profile

Avatar
Validate 1
Level 2
dennyj13354090
Level 2

Likes

8 likes

Total Posts

27 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back
Boost 5
View profile
dennyj13354090
Level 2

27-02-2019

Hi

I have a requirement to place the new component placeholder to the right of existing component  like shown in the image.

new.png

Is it possible to achieve this behavior?

Thanks

Denny

Replies

Avatar

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile
Gaurav-Behl
MVP

27-02-2019

You need to have a parent container in order to restrict its size to specific columns and then work with 'float' and 'width'. You'd have to restrict the width of your component to certain columns with specific constraints.

Use 'column control' component or create your custom one based on your requirements.

check this - Creating a custom Touch UI Grid Component for Adobe Experience Manager

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 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,409 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

27-02-2019

AEM Support out of the Responsive Grid component that lets you place your components into columns.

Or you can use a custom TOUCH UI Grid component - as pointed out by Gaurav.

To learn how to use the out of the box Responsive Grid component - go through the entire weekend tutorial - Getting Started with AEM Sites - WKND Tutorial

Avatar

Avatar
Validate 1
Level 2
dennyj13354090
Level 2

Likes

8 likes

Total Posts

27 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back
Boost 5
View profile

Avatar
Validate 1
Level 2
dennyj13354090
Level 2

Likes

8 likes

Total Posts

27 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back
Boost 5
View profile
dennyj13354090
Level 2

27-02-2019

Hi,

Adding some more details

Following is the jsp code from my component

<%@page session="false"%><%@ page

import="com.day.cq.wcm.foundation.Placeholder"%>

<%@include file="/libs/foundation/global.jsp"%>

<div class="row" style="border: 1px solid red">

<div class="col-xs-12">

<cq:include path="input-items" resourceType="foundation/components/parsys" />

</div>

</div>

and the component is rendered as below

Capture1.PNG

Is there any way to add one more class to the div which wraps the parsys?

<div class="input-items parsys">

Thanks

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 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,409 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

27-02-2019

Why are you not using AEM Responsive Grid system? No need to modify divs when using the Responsive Grid to line up components in a column format.

Avatar

Avatar
Springboard
Level 7
Prince_Shivhare
Level 7

Likes

123 likes

Total Posts

407 posts

Correct reply

65 solutions
Top badges earned
Springboard
Establish
Give Back 100
Boost 100
Validate 1
View profile

Avatar
Springboard
Level 7
Prince_Shivhare
Level 7

Likes

123 likes

Total Posts

407 posts

Correct reply

65 solutions
Top badges earned
Springboard
Establish
Give Back 100
Boost 100
Validate 1
View profile
Prince_Shivhare
Level 7

27-02-2019

As mentioned by Scott, please use Grid system by AEM. you can find lot of articles for this.

however few points

1. you can make use of bootstrap and pass the parsys as you mentioned above. that should also work.

2. you can play with div and css and pass the parsys. ( you answer for -- Is there any way to add one more class to the div which wraps the parsys?) with below article.

3.  you can use column control component.

See how we are using here:

Creating an Experience Manager Responsive Banner Component

~ Prince