Streaming live at 10am (PST)

There's got to be a better way to do this!


#1

Hey all. So I’m trying to figure out a better way to build out this /our-team page.

It’s working but it’s buggy on mobile sometimes. I’m assuming because it’s kind of a hack around to get it all to work as it should. I need a lighter way of handling the bio dropdowns because updating this page is a pain.

The issues come in when trying to show the dropdown at full width (which is a child element so css grid won’t work) under the grid row, but maintain the grid layout while keeping it responsive. Again, the preview link layout DOES work, just looking for a cleaner way to accomplish this. Ideally using one or two collections. I also need to maintain the functionality dropdowns provide in closing other open dropdowns when opening a new dropdown.

Any of you wf masters (**cough cough @sabanna @samliew) out there have any ideas? It would be greatly appreciated!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

I did a very similar thing to this not using collections but I ended up using custom code for it. What I ended up switching to was a modal instead of a dropdown. That way it could be a dynamic list that triggers a nested modal thats set to overlay on the page.

Other than that you might be able to put your dropdown inside the list item and have it drop down to create the vertical space for it to be full width and control the width using absolute positioning to make it span the width of the entire container.

Did you try using your current styles inside of a dynamic list item?


#3

Yeah… a model is probably the easiest way. I was just trying to see if there was a way to keep the integrity of the current design. I did try the dynamic list but couldn’t get it keep the grid layout without creating new dynamic list for every employee. Thanks for reply.


#4

Yeah, you could do it with lists for each employee, I didn’t think of that. You could then just limit them to 1 and set them to start at their respective number or set a numbering field in the cms. You could also add empty ones for yet uncreated employees to be future proof.