question-mark
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-textarea wrap="off" is not working

See original GitHub issue

Bug Report

I can not do English. This sentence uses Google translation.

Ionic version: [x] 4.4.2

Current behavior:

Line feed will occur even if the attribute of wrap="off" is added to ion-textarea. The reason is that white-space: pre-wrap is set in src/components/textarea/textarea.scss.

https://github.com/ionic-team/ionic/blob/10de1da9480896c58bedde06ee022c1456d68354/core/src/components/textarea/textarea.scss#L92

Also, even if this white-space: pre-wrap is deleted, white-space: inherit is set in ionic.mixins.scss, so the line feed is always Will occur.

https://github.com/ionic-team/ionic/blob/10de1da9480896c58bedde06ee022c1456d68354/core/src/themes/ionic.mixins.scss#L32

If you have wrap="off" attribute to solve this problem, it would be better to add CSS to set white-space: nowrap.

I am ready for a pull request to solve this problem. https://github.com/scrpgil/ionic/pull/1

Expected behavior:

If wrap="off" the text is not broken.

Steps to reproduce:

  1. Add the wrap="off" attribute to ion-textarea.

  2. Enter text in ion-textarea that you do not want to break. For example, like ASCII art.

  3. Make sure that the line breaks and the display is broken.

line wrap(Current behavior) Screen Shot 2019-06-10 at 3 25 10

It should be displayed as below.

line no wrap(Expected behavior:) Screen Shot 2019-06-10 at 3 24 59

Related code:

<ion-textarea wrap="off"></ion-textarea>

not working text wrap.

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.15.3 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
scrpgilcommented, Jun 11, 2019

@brandyscarney I understand! Create a pull request referring to the comments.

0reactions
ionitron-bot[bot]commented, Jul 11, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: ion-textarea wrap="off" is not working #18495 - GitHub
I am ready for a pull request to solve this problem. ... Expected behavior: If wrap="off" the text is not broken. Steps to...
Read more >
50633 - textarea always does a soft wrap, even with wrap="off ...
It seems that textarea always does a soft wrap, even with wrap="off" set. My understanding is that in this case, the textarea widget...
Read more >
ion-textarea - Ionic Framework
Indicates how the control wraps text. Attribute, wrap. Type, "hard" | "off" | "soft" | undefined. Default ...
Read more >
Ionic 3 ion-textarea line break issue - Stack Overflow
The problem is on post uri (parameter) that not bring line break to your API, so we should encode the URI to html...
Read more >
white-space - CSS-Tricks
White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found