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.

floating ion-textarea not floating up

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior: using ion-textarea floating in reactive form, while updating form using patchValue floating placeholder is not moving up. maybe the issue is also with ion-input

Expected behavior: Floating placeholder should move up if value is set into the field programatically Steps to reproduce:

  1. create a reactive form in ts file
  2. add ion-textarea in the html
  3. add value to the form using patchValue (didn’t tried it with setValue, currently my json has additional fields) in ngOnInit or ionViewDidEnter

Related code:

**HTML**
<form [formGroup]="adminForm">
 <ion-item>
            <ion-label position="floating">Remarks</ion-label>
            <ion-textarea rows="6" formControlName="remarks"></ion-textarea>
  </ion-item>
</form>

**TS**
inside ngOnInit
 this.adminForm = this._fb.group({
        remarks: ['', Validators.required]
    });

inside ionViewDidEnter or ngOnInit
 this.adminForm.patchValue({remarks : 'test remarks'});
      this.adminForm.updateValueAndValidity();


Other information: Below is the screenshot, ion-textarea is having ion-label as Remarks with value test image

Is should look like below

image

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.13.1
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.3.0

System:

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
mburger81commented, Apr 11, 2019

Ok sorry, yes IMO this is a duplicate, tomorrow I’ll do the test with ngmodel

1reaction
brandyscarneycommented, Apr 11, 2019

@mburger81 No I wanted the reply of if this was a duplicate 😁

Read more comments on GitHub >

github_iconTop Results From Across the Web

floating ion-textarea not floating up · Issue #17559 - GitHub
using ion-textarea floating in reactive form, while updating form using patchValue floating placeholder is not moving up. maybe the issue is ...
Read more >
How to position floating ion-label inside ion-text-area?
Just place your ion-label in "front" of your ion-textarea using z-index css attribute. I suggest you do something like this to achieve ...
Read more >
ion-fab: Floating Action Button for Android and iOS Ionic Apps
Fabs, floating action buttons, are container elements that contain one or more fab buttons. Use ion-fab when creating Android and iOS apps with...
Read more >
Ionic Inputs - javatpoint
Floating Labels. They are the labels which animate or float up when the inputs are selected. You can add the floating attribute in...
Read more >
Floating label on a textarea in Kendo UI for Angular - Telerik
Is it possible to have floating labels work on a textarea? ... when you select a value, the floating label does not move...
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