Trying to create a dashboard that flex’s to the full width of a user’s viewport and so far the only way I’ve been able to do that has been to implement js and force through css changes on page ready. My process has ben to create a group, get an HTML element in it and set it to be an invisible div with an ID. Then target that div with a Workflow JS script, and force a change to the CSS in JS.
Thus far I’ve added the top bar navigation, and the left side navigation and gotten them to expand to the full size of the window and stay fixed on scroll. The issue is setting the content section of the page. I’ve tried going about it the same way, and it’s completely ignoring the JS I’m writing for it. When the content page wouldn’t resize, I figured a group with display:flex would work and that ended up breaking all previous code in the JS file so I don’t think the compiler liked it.
So I’m trying to figure out how to get these nested groups to work for me without “accidentally” dropping my laptop in a garbage disposal and I was hoping the forum could help.
You’re using code where you don’t need to. The header and sidebar groups are set up which is good. To get the main content area to work, great a group the entire width of the page. Inside that group, you should have 2 groups. One should be a fixed group to the left that is the same width as your Floating Group sidebar. It only really needs a height of 10px. The rest of the group’s width should be a 100% responsive group that will contain all of your content. Also, make sure your page isn’t set to fixed width.
Thanks for the assistance. There were a couple of issues I had with your solution that I hoped you could clarify:
The Floating group sidebar is set to be 25% of the page width and it seems that if I make a shape in a group above it, it also stays fixed to the side of the page.
The right side of the content group should be scrollable, and putting it into a group seems to turn on overlay:false. It would be easy to fix this by setting the right side to be transparent and setting the section content below the navs, but with a margin that was enough to move the content past the left navbar and bellow the top navbar. But how am I supposed to set a margin that is equal to an element that should have a changing width+20px?
The floating group should be fixed to the left side of your page, not a percentage. I usually do between 200 and 300px. I don’t know what you’re referring to with the shape element.
Here’s what you do:
We’ll call the group that covers the entire page with the fixed filler group to the left and the content group being everything else “Main Group”
Extend your page height pretty far out.
In the “Content Group” you’ll have all of the sections you desire in here. All of these sections will be there own groups. Here’s an example. The Projects section and the Sessions section are their own separate groups but both are within the “Content Group”:
Alright, so I think I have this solution essentially set up, but it still seems that the content area is not scrollable. The Main Group is still set to be the viewport height even if the page is much larger, leading to the Content side of Main Group not actually scrolling or sizing to the page.
As is, his essentially limits the content to fitting into the viewport, which is something that can be worked around, though I was hoping I wouldn’t have to.
