Set width of menu on split-pane

Ionic Framework ionic-v3
1

Hi, I’m looking a way to set the max-width of the SplitPane
The auto-size function is great, but I would like to set the “max-width” the side panel can reach. Because in big screens (for desktop of course) it gets really wide.
Screen Example:

Thanks!

1 Like
2

I’m also interested in it!

2 Likes
3

Does adding this ( as a work around for now ) work for you?

ion-menu {
    max-width: 200px!important;
}
6 Likes
4

Woow, I really need to improve mi CSS skill
Thanks! that was all that it takes.

It has the same effect on SidePanel, but i’m sure thar is a problem with that component. Ref:

5

As a reference, the base css for the menu is max-width: 28% and min-width: 270px. It is set directly in all three platforms .scss files for the component.

1 Like
6

Feature request here: https://github.com/driftyco/ionic/issues/10893

7

Your solution causes another problem.
This works better for me.


.split-pane-visible > ion-menu {
  max-width: 304px!important;
}
7 Likes
8

There is an official feature for this:

$split-pane-side-min-width
$split-pane-side-max-width
9

That way, on mobile devices the menu will look like below.

print
print.png1194×614 26.5 KB

In the app.scss file I put the following code:

.md {
    
ion-menu {
    max-width: 15%!important;
}
}

Is there a way to change the menu only for Desktop devices?

10

=

Workaround for this problem:

I check in app.component.ts on the initializeApp () method which platform is running.

app.component.ts

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      if (this.platform.is('core')) {
        this.renderer.setElementStyle(this.menu._elementRef.nativeElement, "max-width", "100px");
      }
    });
  }

export class MyApp implements OnInit {
  
  @ViewChild("menu") menu: any;

  constructor(public platform: Platform){
         .....
         this.initializeApp();

app.html:

<ion-menu [content]="content" #menu>
.....
</menu>

app.scss:

ion-menu {
    // md
    // https://ionicframework.com/docs/api/components/split-pane/SplitPane/
    // Show the split-pane when the min-width is 768px (default break point)
    max-width: 768px; 
}
  • If it is started in a Desktop Browser, the menu will be smaller with 100px, if it is other platforms it will set the default value.
11

Hi,

As said above, there are now 2 SCSS variables that control the side pane width, namely:

$split-pane-side-min-width
$split-pane-side-max-width /* default: 28% */

However, the side and main pane widths are set through flex: 1, which means they try to have the same width. This is countered by $split-pane-side-max-width variable, but then we no longer have 3 parameters (min, width and max) but only 2 (min and max, width being always bigger than max).

To restore the situation, we have to modify the panes flex-grow property to a more suitable proportion, e.g.:

.split-pane-visible >.split-pane-side {
  flex-grow: 28;
}
.split-pane-visible >.split-pane-main {
  flex-grow: 72;
}
/* This proportion keeps the same behaviour as default,
but through flex instead of relying on max-width */

Now the width of the side pane is still 28% of the screen, but we can use absolute units for the max, so that the side pane does not grow too big on big screens:

.split-pane-visible >.split-pane-side {
  min-width: 200px; /* Default: 270px */
  max-width: 304px; /* Same as when menu opens in mobile mode */
}
3 Likes
12

///in app.scss

ion-menu {
max-width: 10%!important;
}
.menu-content{
max-width: 80%!important;
}

1 Like
13

This is my workaroud in ionic 5

ion-menu::part(container) {
  max-width: 150px!important;
}