column control responsivegrid aem 6.5 parsys with 0px width

[sreenu539]

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.

[ksh_ingole7 · Accepted solution]

Hi,

I believe the width of the parsys is 0px. From Chrome Dev Tools can you find the CSS property that is setting the width as 0px and disable it. If disabling the property helps then find that particular CSS and do changes accordingly. This seems like an CSS issue, where a certain class is setting the width of the parsys to 0px.

Thanks