ionic-team / ionic-team/pwa-elements

Toast messages don't respect line breaks

Open
#34 1 comment 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
171
Forks
50
PR merge metrics
No merged PRs in 30d

Description

I can not figure out how to create line breaks in a toast message. When on Android, for example, I can use `\n` to insert a newline, which works great. However, the same messages are being flattened to one line in the PWA, which looks ugly. Is there a way to represent line breaks?

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

**Current behavior:**
All whitespace (`\n`, `\t`, multiple spaces in a row) in the input text of the Toast plugin seems to be normalized to a single space. When I try to use HTML line breaks like `
`, they are passed through un-parsed.

**Expected behavior:**
There should be a way to represent line breaks in the toast messages, like on other Capacitor-supported platforms. Ideally this should simply respect the `\n` character so toast works identically across platforms.

**Steps to reproduce:**
On a browser page with both pwa elements and capacitor.js, paste in the developer console:

```
window.Capacitor.Plugins.Toast.show({ text: "0m 11s spent on Meditate \n Meditate ➤ Workout \n Starting from 0m 0s", duration: '10000'}).then();
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.