Issues with responsive grid

[v1101]

Hello Community - We are facing some issues with the responsive grid resizing in 6.4. It was working for some time but all of a sudden the resizing is not working, I can confirm that there is no recent changes happened. If I try to resize the layouting, the cursor/pointer is going back to its original state. Is there a way to fix this issue ? The issue is kind of intermittent. Not sure what is causing the issue.

[Vijayalakshmi_S · Accepted solution]

Hi @v1101,

By the term "XF responsive grid", you mean the responsive grid component(wcm/foundation/components/responsivegrid) as part of XF editable template ?

Please elaborate on the component resource type used, XF and short screen cast of layout issue if possible.

[v1101]

@Vijayalakshmi_S- We are using responsive grid component(wcm/foundation/components/responsivegrid) to resize the component and the template is not based on editable. temppate. If we try to resize the component, the resized breakpoints are captured in the JCR properties but the resizing is not happening in the UI (Author Mode). i.e,if we try to resize the components, it is going back to original state rather than the resized width. The required clientlibs are availablle in the page (grid.less - compiled into clientlibs). Can you please let me know how to resolve this issue?

[Vijayalakshmi_S]

Hi @v1101,

Given that it was working before and all of a sudden it stopped working/ intermittent issue - per your query, try the below to narrow down the issue.

• Try resizing the layout in we.retail page and see if it is working there - To check if the issue is at instance/project level
  • If it is working in we.retail pages, cross check if there was any recent changes to the code base related to CSS / front end module. 
  • Install an empty patch of the respective project, trigger a build once again and try. 
• If it is not working with we.retail pages, try to restart clientlibs related bundles. (Last option after all possible trials : To be tried in local/DEV)

Note : Each and every trial you make, try it in Incognito mode. (retaining only one Incognito window)

[arunpatidar]

I would suggest to check in "view as published" mode. 

there are two possibilties -

1. grid CSS is not loading or corrupted due to missing less variable or files.

2. the grid classes are not applied in the HTML DOM.

[v1101]

Hi Arun - Thanks for the response. I can see the clientlib is getting loaded in "View as Published" mode as well. I have verified the less files and the compiled css and don't see any issues. I have even rebuild the clientlibs several times and also changing the category to different name as well. In authoring mode, once I resize the component, it is not keeping the reisized width.

[arunpatidar]

ok, so you meant if you resize, you can't see the grid classes getting changed? Which component are you using to resize, if you are using another container component then it may not work .

I would suggest compare the DOM classes, where the actual grid classes get applied.

[v1101]

I am using RTE, Image and also Layoout Container. The issue is intermittent. Moreover, when the resizing us not applied, I could see the offset and width values are stored as “NaN” in the JCR for the viewport.

[arunpatidar]

It looks like a bug, I would say if you can reproduce this on vanilla instance then open a day care ticket.