How to create an Android style "mini toast" using the cssClass option?

Ionic Framework ionic-v3
1

Hi, I have quite a few applications where I see them show a small toast where the width fits the text and it has rounded corners. It looks similar to this…

screenshot…

image

I wanted to (optionally) do this using the cssClass property of the ToastOptions object.

I created similar css, eg

    .mini-toast {
	   background: transparent;
	   background-color: transparent;
	   
		.toast-container{
		  background: transparent;
		  background-color: transparent;
		}
		
		.toast-message{
			display: table;
			margin: 0 auto;
			border-color: black;
			border: 2px solid;
			border-radius: 25px;
			padding:3px 10p
		}
	}

 
     let toast = this.toastCtrl.create({
         message: 'test',
         cssClass: 'mini-toast',  <------------------------
     });
    toast.present();

but I am not getting the correct results as shown here running in browser using ionic serveimage

Looking at all the css, i can’t see where the black background (in the rectangle) is coming from

Does anyone know how to do this using cssClass option?

Thanks in advance

1 Like