TextField + ngModel + 'required' causes layout height to change

[sudiptosen]

Moved Issue#2159

Environment { "nativescript": { "id": "org.nativescript.nsFormsDataBinding", "tns-android": { "version": "6.4.1" }, "tns-ios": { "version": "6.4.0" } }, "description": "NativeScript Application", "license": "SEE LICENSE IN ", "repository": "", "dependencies": { "@angular/animations": "~8.2.0", "@angular/common": "~8.2.0", "@angular/compiler": "~8.2.0", "@angular/core": "~8.2.0", "@angular/forms": "~8.2.0", "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", "@nativescript/theme": "~2.3.0", "nativescript-angular": "~8.21.0", "reflect-metadata": "~0.1.12", "rxjs": "^6.4.0", "tns-core-modules": "~6.4.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular/cli": "^9.1.4", "@angular/compiler-cli": "~8.2.0", "@nativescript/schematics": "^1.0.0", "@ngtools/webpack": "~8.2.0", "nativescript-dev-webpack": "~1.5.0", "typescript": "~3.5.3" } }

The issue

This simple layout has two issues:

1. Extra padding/margin for the TextField
2. As you start typing the top layout pushes the elements under it (added a screen capture here)

`

`

To Reproduce

• Use tns create sampleApp --template tns-template-hellow-world-ng to create the standard app
• Use the above snippet to create the view
• Start typing in the first TextField

Expected behavior

• The elements starts shifting. This happens only if validations like 'required' is used

Sample project https://play.nativescript.org/?template=play-ng&id=Xcs3fT&v=1

Findings

:warning: By doing some elimination it boils down to the following that causes this:

1. Moving to @nativescript/theme": "^2.3.3" from nativescript-theme-core": "~1.0.6"

2. Including the new themes:

@import '~@nativescript/theme/css/core.css'; @import '~@nativescript/theme/css/default.css'

instead of

@import '~nativescript-theme-core/css/core.light.css'

:warning: Update - <TextField [(ngModel)]=“_fName” required style=“margin-bottom: 0"></TextField> is a patch fix.

The following in core.css must be causing it TextView.ng-valid,TextField.ng-valid,PickerField.ng-valid,DatePickerField.ng-valid,TimePickerField.ng-valid,RadAutoCompleteTextView.ng-valid{margin-bottom:20}

[Burgov]

As someone pointed out on slack, it seems very related to the issue I created yesterday: https://github.com/NativeScript/nativescript-angular/issues/2165

[prajilshresthaiw]

+1 for this issue!

[asciidiego]

+1 for this issue.

[hendrickson-tyler]

Let's get some movement here, please. This is extremely frustrating to have to try and fight the theme in order to keep layout consistent when using form validation.

Is there any logical reason to have the margin change between these states? It seems rather strange to have that as default behavior. I've opened a simple PR to remove the offending styles. If there's something I'm not considering here, please let me know.

[cloudhx]

+1 for this issue! Brand new project created from NS 8

[fpaaske]

Any updates on this?