Solved
column control responsivegrid aem 6.5 parsys with 0px width
Hi All,
Does anyone implemented a column control using responsivegrid ? Could please share HTL/component code if possible.
What we have at present in our project is a column control using "parsys".
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
Issue: parsys coming as 0px height, container responsviegrid parsys coming with 0px width see below screenshot.
<div data-sly-unwrap data-sly-use.colControl="com.company.models.ColumnControl"></div>
<div class="column-control--background" id="${properties.id}" style="${colControl.inLineClass @ context='styleComment'}">
<div class="responsivegrid column-control-cmp container-fluid ${colControl.columnCountClass} cmp-custom-column-control-container ${properties.desktopColumns== 'four-column-25-25-25-25' ? 'stack960' : ''}">
<div class="colctrl-container"
data-sly-test="${properties.desktopColumns == 'two-column-50-50'}">
<div class="cq-placeholder cq-marker-start" data-emptytext="Start of 2 Columns"
data-sly-test="${wcmmode.edit}">
</div>
<div class="aem-Grid aem-Grid--medium--12 aem-Grid--default-12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
<sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--6 aem-GridColumn--default-12" >
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--6 aem-GridColumn--default-12" >
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
</div>
</div>
<div class="colctrl-container"
data-sly-test="${properties.desktopColumns == 'two-column-66-33' || properties.desktopColumns =='two-column-33-66'}">
<div class="cq-placeholder cq-marker-start" data-emptytext="Start of 2 Columns"
data-sly-test="${wcmmode.edit}">
</div>
<div class="aem-Grid aem-Grid--medium--12 aem-Grid--default-12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
<sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
<div class="colctrl-column aem-GridColumn ${properties.desktopColumns=='two-column-66-33' ? 'aem-GridColumn--medium--8' : 'aem-GridColumn--medium--4'} aem-GridColumn--default-12" >
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
<div class="colctrl-column aem-GridColumn ${properties.desktopColumns=='two-column-66-33' ? 'aem-GridColumn--medium--4' : 'aem-GridColumn--medium--8'} aem-GridColumn--default-12" >
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
</div>
</div>
<div class="colctrl-container"
data-sly-test="${properties.desktopColumns== 'three-column-33-33-33'}">
<div class="cq-placeholder cq-marker-start" data-emptytext="Start of 3 Columns"
data-sly-test="${wcmmode.edit}">
</div>
<div class="aem-Grid aem-Grid--medium--12 aem-Grid--default--12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
<sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--4 aem-GridColumn--default-12 ">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--4 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',2]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--4 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
</div>
</div>
<div class="colctrl-container"
data-sly-test="${properties.desktopColumns== 'three-column-6-47-47'}">
<div class="cq-placeholder cq-marker-start" data-emptytext="Start of 3 Columns"
data-sly-test="${wcmmode.edit}">
</div>
<div class="aem-Grid aem-Grid--medium--12 aem-Grid--default--12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
<sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--2 aem-GridColumn--default-12 ">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--5 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',2]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--5 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
</div>
</div>
<div class="colctrl-container"
data-sly-test="${properties.desktopColumns== 'four-column-25-25-25-25'}">
<div class="cq-placeholder cq-marker-start" data-emptytext="Start of 4 Columns"
data-sly-test="${wcmmode.edit}">
</div>
<div class="aem-Grid aem-Grid--medium--12 aem-Grid--large--12 aem-Grid--default--12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
<sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12 ">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',2]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
<sly data-sly-test.par="${'{0}{1}' @format=['par_',3]}"/>
<div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12">
<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
data-sly-unwrap></div>
</div>
</div>
</div>
<div class="cq-placeholder cq-marker-end" data-emptytext="End of Columns" data-sly-test="${wcmmode.edit}">
<!--End of Columns-->
</div>
</div>
<div data-sly-test="${(wcmmode.edit || wcmmode.preview)}"
class="cq-placeholder ${classAppend}"
data-emptytext="${component.properties.jcr:title}${emptyTextAppend && ' - '}${emptyTextAppend}">
</div>
</div>
Could someone share their knowledge, experience on achieving column control feature, good authoring experience without 0px widths or 0px heights. I am ok to complete try a new column control implemented with responsivegrid/container as well.