Full Width ionic 2 <ion-menu>

Ionic Framework ionic-v3
1

Hi,

I’m trying to make a menu (or menu page) that will be 100% width.

How can I achieve this?

I’ve tried something like:

<ion-menu type="overlay" [content]="content" width="500">

or even

<ion-menu type="overlay" [content]="content" width="100%">

but no luck…

2

Is there any solution for this issue ?

3

You could try in your SCSS:

.menu-inner { width: 100%; }

3 Likes
4

If i increase the menu-inner width the closing animation doesn’t work properly. i am looking for a solution which calculates all including animation.

5

In the docs (Overriding Ionic Sass Variables) there you can find the variable $menu-width with a default of 304px, which you could override in your app.variables.scss.

But I think only px values are allowed here.

6

Yes, But i have two menus and i want two different widths for each of them so it doesn’t work. Anyhow i did it with CSS changes. the code is below

.menu-inner{
width: calc(100% - 50%) !important;
}
.ion-content{
transform: translate3d(calc(100% - 50%), 0px, 0px) !important;
}

1 Like