floating ion-textarea not floating up
See original GitHub issueBug 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:
- create a reactive form in ts file
- add ion-textarea in the html
- 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
Is should look like below
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:
- Created 5 years ago
- Comments:10 (7 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ok sorry, yes IMO this is a duplicate, tomorrow I’ll do the test with ngmodel
@mburger81 No I wanted the reply of if this was a duplicate 😁