Expanding content - Please help

[Newtothis]

Hi guys,

i’m very new to Weweb so everything is a learning curve, yesterday I managed to create an expanding/collapsable side menu which works okay. However, I’m trying to get the content outside of the side menu to expand to ‘fit’ the page when the side menu is collapsed. I’ve got some images below to help visually but if you have any questions let me know.

[Newtothis]

I’m assuming it would be a simple If variable, i.e. If the side menu is collapsed then expand? Apologies, my knowledge isn’t great so I wouldn’t know how to action this!

[Joyce]

Hi @Newtothis

Nice design! Congrats on putting it together

So yeah, you’ll be able to achieve the desired result by binding the width of the menu and content to a variable

Check out this video, around the 3 minutes 40 seconds mark:

Design a responsive sidemenu

[Newtothis]

Hi @Joyce

thank you for the advice, i’ve tried this out and created a variable for both the content and header so I can bind them to expand when my side menu collapsed, however all of the div’s and columns within the content and header sections goes drastically out of size…

any advices?

[Joyce]

Can you share a video or screenshots of what you attempted and the results you’re seeing?

[Newtothis]

Sorry, it’s all a bit of a mess as i’m playing around with it, I hope it makes sense…

[Joyce]

It doesn’t unfortunately. I can only reproduce your use case and understand what’s going on if you show me how things look like in the editor. For example:

• what is the sidemenu container width bound to?
• what is the main content section width bound to?
• what does the workflow that expands the sidemenu look like?
• what does each step in the workflow look like?
• how is the width variable being updated and with what values?

I’d suggest a video that walks us through the project to make things easier. Anything that can help us understand how things are setup on your end and what might be going wrong.

[Newtothis]

Hi Joyce,

Thanks for all of that, i’ll film a video tomorrow morning for you and post it in this topic, I think i’ve over complicated it or likely made an error somewhere whilst i’ve been playing around…

[Newtothis]

Hi @Joyce,

Sorry about the wait, I tried to film a video but my audio doesn’t seem to be picking up, i’ve screenshotted the best I can to explain.

Firstly this is an image of my main dashboard all sized in nicely, the side menu is fixed at a max of 280px and the header at 1000px (assuming my native size is 1280 x 720).

In order to achieve my side menu’s collapsable feature I created a variable and boolean, imaged below which essentially means when the icon is clicked the side menu can be in two sizings, 80px collapsed and the max 280px expanded.

My thought process behind having the header expand in line with the side menu variable was to mirror this and create another variable tied to the header which follows the same rules. The image below shows the header variable I created, in the collapsed state it is set at 1000px and expanded 1200px.

As you can see this is the outcome of this is imaged below, the header does in-fact move however, the contents of the header go out of line. My other issue is that my header has a 280px margin to fit it nicely next to the side menu however, this seems to leave a white area in which the header background doesn’t reach.

This is the same for the content section too but the misalignment is even worse due to the columns and charts inside.

My first thought is that my variable values aren’t correct for the header or that the formula i’m inputting isn’t correct.

Again, i’m really new to this so every day is learning curve.

[Newtothis]

@Joyce Hi joyce, just wondering if you have any ideas? still stuck on this

[Joyce]

Hi @Newtothis,

Thanks for sharing the screenshots. Unfortunately, it’s very hard to help out without a full view of what’s going on.

For example, it looks to me like the misalignment is coming from how you styled the flexboxes inside the header and content sections but I can’t be sure because you didn’t share that with us yet.

If you can, I would recommending attending one of our live office hours for more hands-on support.

Otherwise, if you send me a link to your project in a private message, I can try to take a look at it and report the solution on here so that everyone can benefit from the solution.

Let me know what suits you best

[Newtothis]

Hi Joyce,

It’s okay, someone managed to offer a solution which was tying the width of the content section and header section to margin variables. So In the side menu’s collapsed state (80px) the margin would readjust to 80px too and vice Verda for the expanding.

This is the formula below for anyone else having a similar issue!

“0 0 0” + if(sidebar expansion = true, menuWidth.expanded+“px”, menuWidth.collapsed+“px”)

Thanks for the help