'ionic ion-menu border-radius is not changing

I need to border-radius in ion-menu but when i am doing its applying on shadows of entire page. i need to just do in white menu.

This is how its showing

I need to show like this

My app.component.html

<ion-app>
    <ion-menu side="end"  contentId="menu-content">

    <ion-content >
        <div >

        <div style="text-align: right;">
            <ion-icon name="more" style="font-size: 25px;"></ion-icon>
        </div>
        <div style="display: flex; justify-content: center;">
            <ion-avatar style="text-align: center;">
             <img src="../../assets/img/demo.jpg">
            </ion-avatar>
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">
            Downloads
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">
            Sign Out
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">

        </div>
    </div>

    </ion-content>

    </ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>

global.scss

ion-menu{
--background: white !important;
  --width: 150px;
  --height: 170px;

}

When i add border-radius in ion-menu its just change the radius on entire blur page. I need to know hoe can i change the radis of just white box which have width of 150px;

ionic-framework ionic4

Solution 1:^[1]

Sergey was right, for these kinds of things you need to use popover - https://ionicframework.com/docs/api/popover.

Using your code I was able to create quickly the UI you needed.

Also, I've put the code on github so you could see what I did there: https://github.com/App-to-date/menu-popover

Solution 2:^[2]

If help another person, work...

const popover = await this.popoverController.create({
            component: MenuComponent,
            event: event,
            translucent: false
        });
// INJECT BORDER-RADIUS
popover.shadowRoot.lastChild.lastChild['style'].cssText = 'border-radius: 20px !important;';

return await popover.present();

Solution 3:^[3]

HTML:

<ion-menu side="end"  contentId="menu-content">
[style]="sanitizer.bypassSecurityTrustStyle(yourStyle)">

TypeScript:

import {DomSanitizer} from "@angular/platform-browser";

yourStyle = "--background: white !important; --width: 150px; --height: 170px;"

constructor(private sanitizer: DomSanitizer)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Monomachus
Solution 2	Jeanfranco Cores Gonzalez
Solution 3	jkdev

'ionic ion-menu border-radius is not changing

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]