Duplicate id="" / Invalid HTML because of multiple devices layouts in DOM

---

Hi,

I just noticed that the layGridder Plugins throws the desktop layout + phone layout entirely every time.
Adding a simple "display:none" on the one that should be hidden.

While I do understand it's probably simpler for transitionning from one layout to another. Isn't it more heavy on both server & device for a small benefit ? (we rarely transition from phone size to computer size).

Also it is resulting in invalid HTML :
I set an id="" for an element inside my grid and because the layout is added twice to the DOM (i'm guessing three times if I activate tablet layout), I have two elements with the same id="".
Which is not valid HTML and in my case breaking some javascript I'm running ( working on a fix for myself ).

I'm just thinking there could be some fixes.

• Either fetching the resized layouts from server on breakpoint.
• Storing the layouts inside a variable just to avoid adding them to the DOM and swapping them on breakpoint (quick fix)

@rsepierre I just checked. I think laytheme already behaves this way.
Both mobile and desktop menus are in the DOM (one with display: none;).

But for the actual Grid, laytheme swaps them completely (not sure if it's from a variable or ajax) so there is only one grid in the DOM at the one time.

Hey @rsepierre,

You are right, the DOM is invalid. We will find a solution to fix this.

We don't want to use transitions or fetching for the switch. We use css to display the right laygrid.
For your Javascript you can use the classes 'lg-phone-grid', 'lg-desktop-grid' and 'lg-grid'.

Best
Felix