Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-toast wrong wrapping when using inside

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x [x] probably also 5.x

Current behavior: I’m using an ion-toast. I’m using  tags in my toast message. The white-space: pre-wrap makes the toast wrapping behave wrong when the text wraps directly after the closing .

As you can see the next line is indented by one space:

Expected behavior: The correct behavior is achieved with either white-space: normal or white-space: pre-line:

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

Related code: The last change of this was here: https://github.com/ionic-team/ionic/issues/16360

Other information: It would be great if this could be backported to 4.X I can open a PR if you want. If there’s something I have to know to get this backported, please tell me, thanks!

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/home/rafael/.nvm/versions/node/v13.7.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.19
   @angular-devkit/schematics    : 8.3.19
   @angular/cli                  : 8.3.19
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/opt/android-sdk-linux)
   NodeJS            : v13.7.0 (/home/rafael/.nvm/versions/node/v13.7.0/bin/node)
   npm               : 6.13.6
   OS                : Linux 5.3

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

liamdebeasicommented, Mar 9, 2020

Thanks for the issue! I can confirm that this should be pre-line. I have created a PR for this fix; however, Ionic Framework v4 is only receiving critical security fixes, so this fix will be available in Ionic Framework v5.

1reaction

liamdebeasicommented, Mar 30, 2020

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20729 and will be available in an upcoming release of Ionic Framework.

Top Results From Across the Web

bug: ion-toast wrong wrapping when using inside · Issue ...

Current behavior: I'm using an ion-toast. I'm using tags in my toast message. The white-space: pre-wrap makes the toast wrapping behave ...

Issues with Toast - ionic-v3

I plug in the toast code and try to add position to Toast using the documentation, but I get this error when I...

Toast | Components - BootstrapVue

Toasts are wrapped in a <div> with class b-toast to allow for Vue list-transition support when displayed in a toaster component.

Ionic: How to not stack multiple toast notifications?

Multiple calls to this method will lead to 2 or more error messages shown on top of each other if the timing of...

How to Create An Ecommerce App with Medusa and Ionic

In this tutorial, you'll build an ecommerce app using Medusa and Ionic. ... { console.log("error", err) }); }, [props.match.params.id]) return ( <IonPage> ...