Variable margin

Hi guys,

i’m currently trying to have my content expand to fit the page when my side menu collapses. For some context i’ve created a collapsable side menu which is bound to a width variable, see image below.

My issue is that i’m unable to get the content to expand (header and content containers) when the side bar is in it’s collapsed state. I’ve tried everything from creating a variable for the header and trying to bind it to the side menu’s collapsed state but it’s not functioning correctly

The header also has a margin of 280px assigned to it too so i’m wondering if the issue is that I need a variable for the margin too? could someone give me some advice and examples of how to do this and ensure that when the header is expanded all of the internal div and search bar line up correctly as well as the margin.

Hi @Newtothis ! How’re you?

I’m doing this right now hahaha!

If you are using an element that overlaps other elements (Drawer, Sidebar Menu…) you will need a variable to give margin to the left so that when the element is expanded the margin is placed at the same time.

If the element is a common container, you can just work with a variable for the width of the container itself. To do this, the other container must be set to automatic width and sizing to “expanded”.

Captura de tela 2024-03-19 091850

If you need us, we are available!

Best Regards,

Hi Felipe!

thanks for the advice, this has been killing me for the past couple of days hahaha.

Is there any chance you could maybe make a short video when you have a moment explaining this please?

I would really appreciate it, I learn better through visuals haha.

thank you so much.

1 Like


Loom - Left Menu Width!

Felipe, you are my hero! thank you so much :slight_smile:

1 Like

Hi Felipe!

I think my issue is that the side bar expansion is done with one icon, here’s a video to showcase what’s happening.

Hi @Newtothis , I see you have a max width on the two element, remove it and give it a try ?

I have tried that and it’s still not working, i’m wondering if it’s the variables i’ve created?

Ok sorry I didn’t first see also the margin size but for the margin you should bind :

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

This will change the margin dynamically

And Unbind the width also


Follow video…

Left Menu (Side Menu)

Basically you will change the concept: instead of moving the width of the menu, you will alternate between opening and closing the menu and at the same time adding and removing the margin on the main element. You can do this only on the parent element (section), as you are using an element that overlaps the other elements, which is why you need to make the margin dynamic.

DISCLAIMER: In the video, the margin is set to 0px and closing the Side Menu. In your case, you just need to set the variable to 80.

1 Like

thank you so much man!


thank you so much for the help Felipe, it’s functioning as expected!