Repository navigation
IOS: Applying class to secure TextField randomly change it's font-size #3221
Description
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.jsonfile 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 ****** ?
Activity
NickIliev commentedon Dec 1, 2016
Hello @konradkubiec
I have tested your case but was not able to reproduce it at my side.
However, I've noticed that your versions of runtimes and modules are not the latest stable which of this moment is 2.4.0. Can you try to update your NativeScript CLI and your package.json , remove the platforms folder and rebuild your application.
If you are still hitting the issue afterward, perhaps you can send us a sample project that reproduces this behaviour.
konradkubiec commentedon Dec 1, 2016
I've updated NativeScript CLI and rebuilt platforms.
I see a difference in app styling but there is the same bug with TextField. I'll prepare a repo tomorrow with a sample app so it will be easier to replicate my situation.
konradkubiec commentedon Dec 2, 2016
Demo app: https://github.com/konradkubiec/input-demo
konradkubiec commentedon Dec 5, 2016
@NickIliev Did you have time to take a look at my demo?
NickIliev commentedon Dec 5, 2016
@konradkubiec I am on it - will write back when I have more information
Update: can confirm that I am reproducing this behavior at my side - logging this as a bug.
NickIliev commentedon Dec 5, 2016
Code to reproduce here
result: the font-size is changed and the real font-size is applied back only when the user starts typing in again.
lock commentedon Aug 28, 2019
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.