Change side menu width on new splitpane?

Ionic Framework ionic-v3
1

I’m using new splitpane for a new project. How can I change width of side menu? i try $menu-width but it’s not work for splitpane

2

Add your voice here and we’ll see if it gets some traction:

1 Like
3

So they closed the issue you were referring to and said to ask the question here. I too would like to know of a why to set the max width of the side pane in desktop mode.

I am not sure if it is the correct way to do it but it work. I just added this to my app.template.scss file

.split-pane-ios.split-pane-visible > .split-pane-side {
max-width: 275px;
}

1 Like
4

The width is defined with this SCSS:

.split-pane-ios.split-pane-visible >.split-pane-side {
min-width: 270px;
max-width: 28%;

border-right: $hairlines-width solid $list-ios-border-color;
}

.split-pane-md.split-pane-visible >.split-pane-side {
min-width: 270px;
max-width: 28%;

border-right: 1px solid $list-md-border-color;
}

.split-pane-wp.split-pane-visible >.split-pane-side {
min-width: 270px;
max-width: 28%;

border-right: 1px solid $list-wp-border-color;
}

I opened an issue to change the hard coded values to SASS variables.

2 Likes
5

Thanks for replies, so for now i add this

.split-pane-ios.split-pane-visible >.split-pane-side {
max-width: 275px;

border-right: $hairlines-width solid $list-ios-border-color;
}

.split-pane-md.split-pane-visible >.split-pane-side {
max-width: 275px;

border-right: 1px solid $list-md-border-color;
}

.split-pane-wp.split-pane-visible >.split-pane-side {
max-width: 275px;

border-right: 1px solid $list-wp-border-color;
}

to app.scss and look like it work fine, waiting for new version update to have this feature:)

6

any update on how to set the width on menu ?
I tried using $menu-width but its not working.

7

You can override default Ionic Sass variables in your variables.scss file

$split-pane-ios-side-max-width: 50%;
$split-pane-md-side-max-width: 50%;
$split-pane-wp-side-max-width:50%;

The second option is to write a simple css class .
ion-menu {
max-width: 800px !important;
}