Ionic-framework: ion-textarea issues on Devices.

Created on 27 Jan 2017  路  7Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Currently ion-textarea is behaves different then the normal textarea

  1. in ion-textarea text can not be selected/copy/pasted by default, on textarea it work good.
  2. in ion-textarea when writing long text sometime the text goes behind the keyboard.. the is not auto scroll to the current location of the cursor, with normal textarea all works good.

Expected behavior:
to ion-textarea to work like normal textarea with extra features?
Steps to reproduce:

create an empty page with just ion-textarea in it..(with 100% width and height)
and try to select the text, copy or paste..

also try to write long text and see if the text doesn't go behinds the keyboard

For Ionic 2 issues --> http://plnkr.co/edit/z0DzVL?p=preview

Your system information:

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

Most helpful comment

Hello! Thanks for opening an issue with us! Since the original issue was solved by putting the ion-textarea inside an ion-item, which it always should be, this now seems like more of a support question. I will urge that you ask this question on our forum or on our slack channel. Thanks for using Ionic!

All 7 comments

Are you using it inside a ion-item? i was having the same problems and inserting it inside ion-item solved for me.

@synga Thanks for the response.. I was not. Ill try that :)

@synga Basiclly it looks good but I cant seem to get the textarea to take all the screen height when the keyboard is open

image

As you can see there is a large space between the the button and the text.. But when the keyboard is not shown the height is ok.. any ideas?

@royipressburger sorry, but i can't help you with this without seeing some code

scss:

  .textarea-wrapper {
    width: 100%;
    height: 100%;
    .textarea {
      width: 100%;
      height: 100%;
      textarea{
        height: 100%;
      }
    }
  }
<ion-content>
    <div class="textarea-wrapper">
<ion-item class="textarea white" no-lines>
          <ion-textarea
                  autocapitalize="sentences"
                  autocomplete="on"
                  spellcheck="true"
                  autocorrect="on"
                  class="textarea"
                  [placeholder]="options.placeholder"
                  [(ngModel)]="inputData"></ion-textarea>
        </ion-item>
    </div>
</ion-content>

Thanks :)

By the.. giving the item fixed height like 200px works good, But I want to save those calculations.

Hello! Thanks for opening an issue with us! Since the original issue was solved by putting the ion-textarea inside an ion-item, which it always should be, this now seems like more of a support question. I will urge that you ask this question on our forum or on our slack channel. Thanks for using Ionic!

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexbainbridge picture alexbainbridge  路  3Comments

SebastianGiro picture SebastianGiro  路  3Comments

RobFerguson picture RobFerguson  路  3Comments

danbucholtz picture danbucholtz  路  3Comments

brandyscarney picture brandyscarney  路  3Comments