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

bug: ion-textarea wrap="off" is not working #18495

Closed
scrpgil opened this issue Jun 9, 2019 · 7 comments

Comments

2 participants
@scrpgil
Copy link
Contributor

commented Jun 9, 2019

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.

white-space: pre-wrap;

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.

white-space: inherit;

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.
scrpgil#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

@ionitron-bot ionitron-bot bot added the triage label Jun 9, 2019

@scrpgil scrpgil changed the title bug: ion-textarea wrap="off" not working bug: ion-textarea wrap="off" is not working Jun 9, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

Thank you for the issue! I believe this can be fixed by changing the code to the following in textarea.scss:

:host {
  white-space: pre-wrap;
}

And removing the white-space rule here: https://github.com/ionic-team/ionic/blob/master/core/src/components/textarea/textarea.scss#L92

@ionitron-bot

This comment has been minimized.

Copy link

commented Jun 10, 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!

@ionitron-bot ionitron-bot bot removed triage labels Jun 10, 2019

@scrpgil

This comment has been minimized.

Copy link
Contributor Author

commented Jun 11, 2019

Thank you!
I tried the content of the comment I received.
But the problem did not go away.

I found a way to solve the problem.
It seems necessary to delete @include text-inherit () as well as white-space.

@include text-inherit();

I would like to send a pull request with this content.

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

@scrpgil So the solution in my comment above will still make the text wrap, as that is the default for the textarea. The text-inherit() mixin makes it so that the native textarea will inherit the white-space value from the host element. By moving the white-space rule from the native textarea to the host (ion-textarea) element, it will allow you to write the following:

ion-textarea {
  white-space: nowrap;
}

And then the textarea will be customized to your liking. Let me know if you have any questions. 🙂

@scrpgil

This comment has been minimized.

Copy link
Contributor Author

commented Jun 11, 2019

@brandyscarney I confirmed in the comments that I solved it. I would like to send a pull request this way.

As confirmation, I wanted to delete @include text-inherit () because I want to wrap the line only by wrap = "off". Is this not good?

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

We need to keep @include text-inherit(). The default of a textarea should be to wrap, and it can be turned off by adding white-space: nowrap

@scrpgil

This comment has been minimized.

Copy link
Contributor Author

commented Jun 11, 2019

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

@scrpgil scrpgil referenced this issue Jun 11, 2019

Merged

fix(textarea): not working wrap="off" #18508

5 of 12 tasks complete

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Jun 11, 2019

Ionic Core automation moved this from Backlog 🤖 to Done 🎉 Jun 11, 2019

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