Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic 4 - styling ion-toast for full width, problem with left/right value of .toast-wrapper #17854

entom opened this issue Mar 22, 2019 · 3 comments


3 participants
Copy link

commented Mar 22, 2019

Ionic version:
[x] 4.x

I'm submitting a ...
[ ] bug report
[x] feature request

Current behavior:
Ion-toast is showing on position left: 8px, right: 8px.

Expected behavior:
I would like to show ion-toast on full width (100% width) on screen, I can set --width: 100%;
But there is left 8px setting which i'm not able to overwrite with any settings. .toast-wrapper is in shadow-root.

Steps to reproduce:
Show toast on screen, try to make it full width.

Related code:

.toast-wrapper {
    left: 8px;
    right: 8px;

Other information:

Ionic info:


   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.5.0


   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 33 other plugins)


   NodeJS : v11.12.0 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave
   Xcode  : Xcode 10.1 Build version 10B61

This comment has been minimized.

Copy link

commented Apr 2, 2019

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!


This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2019

I'm working with it.

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Apr 16, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Done 🎉 in Ionic Core Apr 16, 2019


This comment has been minimized.

Copy link

commented May 16, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 16, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.