Responsive column control component not working

[raviks007]

When we drag and drop the column control component and define the column layout like 50, 50, in the author mode, the layout wont appear as 2 columns(in my case 50%-50% columns). Also we cannot see the parsys of the second column at all. All I see is the first column and parsys underneath. When I edited in firebug and then added a new component in the second column using firebug and surprised to see the component is displayed at the end of the first column components and not next to each other. Please see the screenshot for more details.

[davidjgonzalez]

@raviks007

Did you include and verify the acs-commons.components or acs-commons.main clientlibs are included on your page load? These contain the CSS that allow the columns to behave in a responsive manner. Try testing the columns out with just text and see if the columns behave as expected.

[raviks007]

I dont see any acs clientlibs loading in the page, May be thats the issue. Should we include manually on the page?

[davidjgonzalez]

@raviks007

You can add it directly to the page, however i'd suggest adding it to your site's clientlib instead.

• http://adobe-consulting-services.github.io/acs-aem-commons/features/responsive-column-control.html

Ensure that either the acs-commons.components client library is embedded into your site’s client library or the acs-commons.main client library is included on your pages (this library embeds acs-commons.components).

As an aside, can you provide any thoughts on how to make this requirement more clear in the docs? You are (at least) the second person confused by this.

[raviks007]

@davidjgonzalez Thanks for the quick replies. I would recommend to place a sample code snippet along with the steps mentioned or at least a screenshot of the embedding the client library so that it will be clear for the reader to follow and also on the requirements. Hope that helps.

[raviks007]

@davidjgonzalez : Just an example like this should help everyone a lot:

<%@include file="../global.jsp" %>
<cq:includeClientLib css="acs-commons.components" />
<div class="col col-3">
    <cq:include path="par" resourceType="foundation/components/parsys" />
</div>

[davidjgonzalez]

@raviks007 this is great feedback - thanks; we will incorporate.

[raviks007]

@davidjgonzalez : I just observed that the responsive column does not seems to work as expected. I just tried using 3 columns and then used text component. I just tried to use different viewports and I observed that the column with text just squeezes in instead of the columns coming down each other in the mobile view. For me or in general its not correct, I columns should be vertically separated in mobile and may be 2 column together in tablet mode while the 3rd one being below the 2 columns. What do you suggest or think?

[davidjgonzalez]

@raviks007 revisiting the code; I think this only supports percentage with columns, rather than collapsing to a break-point and then stacking.

@kalyanar can you comment on this?

[raviks007]

@davidjgonzalez @kalyanar To be frank, I would expect it to behave just like adaptive image component where it implements the standard viewports and changes the behaviour accordingly like collapsing the column below each other in mobile mode etc. Also I see is that I can create a column with a width of 1% which in real world is of no use. There should be atleast 15-20% minimum width. I know we can always extend these components to change its behaviour but as its already built, i would recommend to build it with more real and fool proof so that it can be used without any customization. Its just my suggestion of opinion hence don't take otherwise. But as a user I expect something like that. In my case I was very excited to use this but when I checked everything, I opted not to use to have my own column layout with standard definition of widths. If it was as I suggest, i would definitely used as it is and would be more happy :) On the other hand, great things you are coming up with. Really useful! Please let me know what do you think on my suggestion on this responsive column component.

[davidjgonzalez]

@raviks007 I think you have some good ideas.

Ill close for now and you or someone else that takes an interest can provide an Pull Request w these enhancements.

[srikanth010]

Can Anyone help me where can i find acs-commons.components?