React Material UI Menu overflow

Question

How can I make the main contents move correctly here. Looks like I need some dynamic calculation of margin left or what would be the best solution here?

Initially it looks OK:

But when the menu expands:

Or when the page gets resized:

Answer to this is here: stackoverflow.com/questions/53734659/… — ACV
– ACV, Commented Nov 19, 2019 at 23:15

druskacik · Accepted Answer · 2019-11-16 22:06:41Z

1

I don't know what is the best practice, but this is how I solved similar problem.

Suppose your content looks like this.

<div class="main">
    <Menu class="menu" />
    <Content class="content" />
</div>

And style:

.main {
    display: flex;
}

.menu {
    width: 10vw;
}

.content {
    width: 90vw;
}

.menu__open {
    width: 25vw;
}

.content__on-menu-open {
    width: 75vw;
}

The last two classes are set when menu is opened.

PS: Styling for mobile will require additional classes.

answered Nov 16, 2019 at 22:06

druskacik

2,5273 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ACV · Accepted Answer · 2019-11-19 23:16:50Z

0

The problem was that I didn't use the content in the right place.

Based on the answer here: React Router V4 Implement NavLink inside a ListItem using Material UI

And also by using this

https://material-ui.com/components/drawers/#responsive-drawer

I was able to fix the problem. Basically I was not outputting the content in the right place.

answered Nov 19, 2019 at 23:16

ACV

10.7k5 gold badges84 silver badges91 bronze badges

Collectives™ on Stack Overflow

React Material UI Menu overflow

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related