How do you make rounded corners for side menu in ionic using ion-menu in native

Question

Hi I have researched everywhere and looked at XCode but haven't figured it out. I want to create the venmo style rounded corners for my iOS application, but iOS seems to not obey the sass rules I am setting for it. The side menu styling is controlled by a div class <div class='menu-inner'>...</div> which is generated from <ion-menu> tag.

My sass rule works well on the browser, but I am surprised to find it doesn't work in native production specifically iOS. Here is my sass rules.

.menu-inner {
  border-radius: 0 1.7rem 1.7rem 0!important;
}

which results in the browser with the desired result. In chrome inspector

However, in XCode iOS 12.1 iPhone X results in sharp cornered edges. iPhone X emulator

How do I make the corners rounded in the native app using ionic 3.

Answer 1

You could do it with shadow parts. In the component's CSS file you can specify it like :

ion-menu::part(container) {
border-radius: 25px;
}

Read more about ShadowParts

Answer 2

While this is not the correct solution to this question I did find a creative work around if this is a feature you really want for your project. The solution involves simply creating four div boxes and then fixing them to the corners of the <ion-menu> .

Here's the code for this.

`<ion-menu [content]="content" type="overlay">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
      <div style="background-color: blue;height: 10px;width: 10px;position: fixed;right: -1px;
top: 0;"></div>
      <div style="background-color: red;border-radius: 0 10px 0 0;height: 10px;width: 12px;position: fixed;right: 0;
top: 0;"></div>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>

    <div style="background-color: blue;height: 10px;width: 10px;position: fixed;right: -1px;
bottom: 0;"></div>
    <div style="background-color: red;border-radius: 0 0 10px 0;height: 10px;width: 12px;position: fixed;right: 0;
bottom: 0;"></div>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
`

And then finally blend them in for the correct look and feel to make it seem as if the corners are rounded. For me I swapped red -> #f8f8f8 and blue -> #999 to blend into the background which gave me this.

Totally solved the problem for me! However, this is not the way it should be. I suspect an override of the border-radius property once ionic compiles to the native platform.

All the best coding!

Answer 3

Add this code in to your app.component.ts file it will definately work:

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.menuRadius(); // call menuRadius method
    });
  }
  menuRadius() {
    setTimeout(() => {
      document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 30px 0px 0px');
    }, 2000);
  }

Answer 4

It works here

initializeApp() {
    this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        setTimeout(() => {
            document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 60px 0px 0px');
      }, 2000);
    });
}

Project environment

   Ionic CLI                     : 5.4.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.5
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Answer 5

recently I also had to make a similar change, to make the menu corner rounded, after some reading I have found a easy solution,

Add the below code in the css file where you have used ion-menu

ion-menu::part(container) { 
    border-radius: 0 70px 0 0;
  }


This has to do with the Shadow dom.

Follow below link for more info

https://ionicframework.com/blog/customize-your-ionic-framework-app-with-css-shadow-parts/?_gl=1*1wk5td8*_ga*NDA3OTM3NDc2LjE2MTAzNjA2Nzk.*_ga_REH9TJF6KF*MTYyMjY2OTIwMC4xMTMuMS4xNjIyNjY5MzAwLjA.


Here is a snapshot of menu after above css implementation.


  [1]: https://i.stack.imgur.com/T2xsu.png