Styling the Bottom Drawer

[SirBenedick]

I assume the following is a quite simple question.

How can I style the ion-bottom-drawer? The background-color and border-radius for example.

Thanks

[SirBenedick]

I have found following lines in multiple files. But changing the style in these files doesn't change the components style.

Getting closer 😄

    IonBottomDrawerComponent = __decorate([
        Component({
            selector: 'ion-bottom-drawer',
            template: "<ion-content class=\"ion-bottom-drawer-scrollable-content\" no-bounce>\n  <ng-content></ng-content>\n</ion-content>\n",
            styles: [":host{width:100%;height:100%;position:absolute;left:0;z-index:11!important;background-color:#606060;-webkit-transform:translateY(100vh);transform:translateY(100vh)}"]
        }),

[SirBenedick]

Next discovery:

Styling within the global.scss works for adding a solid border but changing the background-color or adding a border-radius does not work.

ion-content.ion-bottom-drawer-scrollable-content{
    border: 2px solid black;
    background-color: aqua;
    border-radius: 50px;
}

[dmitry-stepanenko]

Try to use css variables. For example, to change backgound color of drawer to red, use --background: red.

Also you can use directive to access shadow dom like this

    constructor(private el: ElementRef) { }

    ngAfterViewInit() {
        const shadow = this.el.nativeElement.shadowRoot || this.el.nativeElement.attachShadow({ mode: 'open' });
        if (shadow && this.elementStyles) {
            shadow.innerHTML += `<style>${this.elementStyles}</style>`;
        }
    }

[SirBenedick]

@cuddlemeister Thanks! changing the background color is working. Sadly I can not change the border radius through css variables. Any idea?

[rflbasa]

Next discovery:

Styling within the global.scss works for adding a solid border but changing the background-color or adding a border-radius does not work.

ion-content.ion-bottom-drawer-scrollable-content{
    border: 2px solid black;
    background-color: aqua;
    border-radius: 50px;
}

I changed the background color opacity of the drawer content, then changed the border radius of the ion-bottom-drawer, then created a new div (#content) for the real content and added a few css variables then it works

ion-content.ion-bottom-drawer-scrollable-content{` --background: rgba(255, 0, 0, 0); }

ion-bottom-drawer{ border-radius: 15px; }

content{

width: 100%;
background-color: red;
padding-top: 5px;
border-radius: 15px;

}

[SirBenedick]

@rflbasa Thanks a lot! Could you explain where you add the custom "content"-class? Within the "drawer-content"-class?

[rflbasa]

Yes i added the custom content within the drawer-content class, it looks like this:

[sandyeveliz]

Hi! did u guys make a work around to this? Im trying to do the same, border-radius for the top corners on the drawer, but the background of drawer is still without the radius or the transparent background Here is what it looks like:

This is the code:

[raminnoodle]

I got it to work only when I added ng-deep to the css `::ng-deep ion-content.ion-bottom-drawer-scrollable-content{ --background: rgba(255, 0, 0, 0); }

ion-bottom-drawer{ border-radius: 50px; }

content{

width: 100%; background-color: red; padding-top: 5px; border-radius: 50px; }`

[indrapalijama]

Hi! did u guys make a work around to this? Im trying to do the same, border-radius for the top corners on the drawer, but the background of drawer is still without the radius or the transparent background Here is what it looks like:

This is the code:

Any help for this case? i also encountered the same problem

[fatma-mohamed]

I have added this to global.scss, to set bottom-drawer's background to transparent:

ion-bottom-drawer { background: transparent; ion-content { --background: transparent; } }

Then since I have an ion-grid inside bottom-drawer (you can do the same with div), in its css:

ion-grid { border-radius: 15px; }

Hope this helps :)

[SackeyDavid]

I have added this to global.scss, to set bottom-drawer's background to transparent:

ion-bottom-drawer { background: transparent; ion-content { --background: transparent; } }

Then since I have an ion-grid inside bottom-drawer (you can do the same with div), in its css:

ion-grid { border-radius: 15px; }

Hope this helps :)

Thank you, it helped!!! Did a little changes to get it to work finally. `ion-bottom-drawer { box-shadow: rgba(184, 184, 184, 0.4) 0 -5px 5px -5px; border-radius: 15px !important; }

ion-bottom-drawer { // background: transparent !important;

ion-content { 
  --background: transparent !important; 
} 

}in global.scss and <ion-bottom-drawer class="drawer" [disableDrag]="disableDrag" [(state)]="drawerState" [minimumHeight]="minimumHeight" [dockedHeight]="dockedHeight" [shouldBounce]="shouldBounce" [distanceTop]="distanceTop">

...` in html

[adalakisE]

I was checking similar topics for the past days, the solution above looks perfect! Another workaround I found is to have a div on the top side of the drawer (e.g. for the "handle") Then give this div a transform: translateY(-10px);

html:

<ion-bottom-drawer class="drawer" 
[disableDrag]="disableDrag" 
[(state)]="drawerState" 
[minimumHeight]="minimumHeight"
[dockedHeight]="dockedHeight" 
[shouldBounce]="shouldBounce" 
[distanceTop]="distanceTop">

<div class="drawer-handle">
  <div style=" margin:0 auto; background-color: grey; width: 3rem; height: 0.2rem">
  //style the div to make it look like a "handle"
  </div>
</div>

css: `.drawer-handle{ transform: translateY(-1.2rem); border-radius: 25px; }` ✌✌