Nativescript: Css placeholder-color not working with dynamic hint values

[vincentduprez]

Did you verify this is a real problem by searching

-> Yes

Tell us about the problem

-> I wasn't able to change the color of some textfields hints and I figured out they all had dynamic hints because of internationalisation.
textfields with static hints don't have this issue.

Which platform(s) does your issue occur on?

At least on IOS, had not had the chance to test on Android

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

• CLI: 3.1.0-2017-06-22-9245
• Runtime(s): 3.0.0
• Plugin(s): Angular/* ~4.1.0

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

Simply by creating a textfield with dynamic hints, sample provided:

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

<TextField col="1" [(ngModel)]="loginData.fname" hint="{{lang._('fname')}}" style="color:#04ccf0; placeholder-color:rgba(255,255,255,.6); text-align:center; padding:10;"></TextField>

lang._() returns a simple string and is used all over the code for translation.

[NickIliev]

@vincentduprez I have tested your case and everything seems to work as expected. However, the color used for placeholder-color along with the alpha transparency is making it almost impossible to distinguish. Use more contrast color and you will see the changes being applied to your TextField.
e.g.

<TextField hint="SOME HINT" style="color:#04ccf0; background-color:lightgray; placeholder-color:rgba(255,122,255,0.6);"></TextField>

Test application used can be found here

[vincentduprez]

Hi @NickIliev thanks for testing out,
unfortunately it's not, I'm working on a dark background and the default greyish color of the placeholder makes it impossible to read, the half transparent white color makes it a light grey easy to read on the other items.

I'll have a look a what element can cause this to happen.

[NickIliev]

@vincentduprez any updates on the issue? I am struggling to understand the problem as the placeholder color seems to be applied with no hassle - let me know if you have some additional information that can help me reproduce the problem.

[NickIliev]

@vincentduprez closing this issue as it is not reproducible on our side but please if you have additional information that can help us let me know and I will retest and reopen the issue.

[gabitoesmiapodo]

Something similar is happening to me, only when using iOS (Android is fine): I'm using nativescript-localize for translations, and using some language keys for the TextField's hints.

When I get into the login screen I get something like this (if you squint your eyes you will see the placeholder text is there):

I should add that if I login, and then logout, I get this :

Placeholders magically appear.

The actual code for the TextFields is like this:

<TextField
        autocapitalizationType="none"
        autocorrect="false"
        class="form-input"
        hint="{{ 'public-form:username:placeholder' | L }}"
        keyboardType="email"
        returnKeyType="next"
></TextField>

The CSS class is this one:

.form-input {
    background-color: transparent;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    border-bottom-color: #fff;
    border-bottom-width: 1;
    color: #ffffff;
    padding-left: 45;
    padding-right: 10;
    placeholder-color: #ffffff;
}

[vincentduprez]

Yes, I still have this issue as well, and behaves the same way as yours.
I really think this issue should be reopened.
Don't have much time to narrow it down. but if I have I will try to create a repo to reproduce the issue.

[hugoangelo]

I had the same issue and after two-way binding the textfield with an ngModel it started to apply the placeholder-color to the textfield (this for iOS).

[gabitoesmiapodo]

Should we report this again?

I'm not sure how they handle these issues.

[NickIliev]

@vincentduprez @hugoangelo @gabitoesmiapodo
I see that you all have the same issue reoccurring - I will retest with the additional information and log this as a bug after confirming the bug - stay tuned for updates.

[NickIliev]

@vincentduprez @hugoangelo @gabitoesmiapodo

Update: I can now confirm that indeed dynamically changing the hint value is resetting the placeholder-color on iOS. I have opened a new issue and logged this as a bug. You can find the issue here - I will update the info once we have stable solution or workaround.

[martinsJoseph]

tried style.placeholderColor="red" ?

[mudlabs]

@creativeJoe Yes,

Setting style.placeholderColor="color" works in code-behind and xml. But I think the desirable approach would be from css or bindingContext.

{N} 3.4.1

[lock[bot]]

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.