Skip to content

IOS: Applying class to secure TextField randomly change it's font-size #3221

@konradkubiec

Description

@konradkubiec

Did you verify this is a real problem by searching [Stack Overflow].

Yes. I didn't find any discussion on this topic.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

  • CLI: 2.3.0
  • Cross-platform modules: 2.3.0
  "nativescript": {
    "platforms": {
      "ios": "2.1.1",
      "android": "2.1.1"
    }
  },
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
    package.json file of your project)
    "tns-ios": {
      "version": "2.3.0"
    },
    "tns-android": {
      "version": "2.3.0"
    }

Please tell us how to recreate the issue in as much detail as possible.

First, you need a secured TextField with some text. Add CSS class (or by [class.className]="condition", or by changing className in component code) to this TextField or it's parents. Font-size will unexpectedly change. You can prevent some of the changes by adding font-size in new-assigned CSS class definition. When you remove the class, font-size will change to some unexpected size. When you change TextField text, font-size changes again...

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

XML:

<StackLayout>
  <Switch class="switch" [(ngModel)]="pinFlag"></Switch>
  <TextField #pin class="input-rounded"

      [class.incorrect]="pinFlag"

      hint="Provide 6 digits PIN"
      keyboardType="number" secure="true"
      [(ngModel)]="pin" (ngModelChange)="onPinChange($event)"></TextField>
</StackLayout>

CSS:

.input-rounded{ font-size: 20; }
.incorrect {
    color: #f00;
    font-size: 20;
}

Use Switch and TextField text changes to see how font-size changes.

PS. Is there any method to remove this up-down move in iOS secure TextField content, that happens when a character changes to * or when you add a new character to ****** ?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions