0
201
ViewsResponsive reorganizing of divs in DOM
My project uses Tailwind + Vue 2. I'm using Vue to iterate through a list and show multiple rows. Each row starts collapsed and has the option to be expanded.
There are 3 visible and 1 hidden div element in each collapsed row. When expanded, the hidden div is made visible. I'm looking to take 2 of the visible div elements from each row and move them into the hidden dropdown div when on mobile. When expanded on mobile, I expect the moved elements to be visible. I also want them to move back when switching from mobile to desktop view.
The expected behavior is as follows:
On desktop, collapsed, the toggle switch and message are displayed.
On desktop, expanded, the toggle switch and message are displayed, does not change location.
On mobile, collapsed, the toggle switch and message are NOT displayed, and are instead moved into the collapsed (hidden) div.
On mobile, expanded, the toggle switch and message are displayed.
This photo demonstrates what I'm looking to achieve.
These have been my attempts so far:
- CSS / Duplicate - Duplicate the element. Make one hidden on mobile and visible on desktop, and the other visible on mobile and hidden on desktop. Although not a clean way of doing this, it appears to work -- until I use the toggle switch. It loses functionality (I assume since it's being repeated).
- Tailwind/CSS
order- As the utility name suggests, the order on the page will indeed change, but this will not move the desired elements into a hidden element; rather move it above/below the hidden element. - Vue Teleport - This is for Vue 3, but there are packages available for Vue 2, such as
portal-vue. I tried it, and since the rows are being iterated, all of the elements end up shoved in the last row's expanded view. I would prefer not to use a package. - Javascript - Similar to teleport/portal: tag divs "move-from" and "move-to" and find them with
getElementsByClassName. Iterate through eachmove-meanddropdowntag (there are 2move-metags for every singledropdowntag). Add event listener for window resize and check to see if page width is < 768. The problem with this is, like teleport/portal, it also stuffs all the elements into the last row's expanded view.
if (this.width < 768) {
const moveMeParent = document.getElementsByClassName('move-me') // there are 20 of these
const dropdownParent = document.getElementsByClassName('dropdown') // there are 10 of these
for (let i = 0; i < dropdownParent.length; i++) {
for (let j = 0; j < 2; j++) {
dropdownParent[i].appendChild(moveMeParent[0])
}
}
}
1 answers
Answer question0
Just to provide an anwser in order to mark this as solved:
When you need a different layout (i.e. html markup) between desktop & mobile, there are a few solutions there:
- Duplicating the elements so they are in both the desktop & mobile position in the DOM. Use CSS to hide one or the other with media queries.
+ Pros: easy to setup, works great for SSR, no js needed.
- Cons: adds additional markup to the DOM, which can slow down the page render if done too many times.
That's the solution I advise in OP's case
- Using javascript to dynamically render the components on a place or another. In vue, that means using
v-if="isMobile".
+ Pros: avoid ghost markup in the DOM as in solution 1.
- Cons: causes flickering on SSR (it renders as desktop or mobile on the server, then updates to another layout when hydrated).
- On some cases, use css only to move your element. Like
flex-direction: row-reverseororder: n.
+ Pros: easy to setup, no js needed.
- Cons: Only works for siblings elements.