Hi
I have a requirement to place the new component placeholder to the right of existing component like shown in the image.
Is it possible to achieve this behavior?
Thanks
Denny
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Is there any way to add one more class to the div which wraps the parsys?
<div class="input-items parsys">
Thanks
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies