Unable to Style the TextField

[benjaminhorner]

It is impossible to apply styling to the TextField contained in a TextInputLayout. Try adding padding or background color does nothing.

[bradleygore]

@benjaminhorner - is this for iOS or android (as the two work very differently). The iOS version inherits directly from nativescript TextField, so whatever properties it supports regarding styling should be supported the same here I'd imagine...

[bradleygore]

Also, some better details on what you've tried, as well as specifically what you're trying to achieve, may be helpful here. Otherwise, anyone trying to help is just guessing - and that's not likely to be overly helpful 😛

[benjaminhorner]

It's iOS related. I am trying to get a padding (supported by TextView) on the TextInputLayout. in the css

.form-textfield {
    padding: 45;
    background: red;
}

in the html

     <TextInputLayout 
          #usernameTextField
          id="usernameTextField"
          class="form-textfield"
          [hint]="user.usernameHint"
          hintAnimationEnabled="true"
          hintTextAppearance="SpecialTextInputLayout"
          [tintColor]="textInputLayout.tintColor"
          [lineColor]="textInputLayout.lineColor"
          [selectedTitleColor]="textInputLayout.selectedTitleColor"
          [selectedLineColor]="textInputLayout.selectedLineColor"
          [editable]="!isLoading"
          [(ngModel)]="user.username" 
          autocorrect="false" 
          autocapitalizationType="none"
          returnKeyType="next" 
          returnPress="focusSecond">
      </TextInputLayout>

The red background is showing but not the padding.

Below is a rendering of a "normal" TextView and a TextInputLayout, both with the css class form-field. As you can see, the first has padding, not the second.

[bradleygore]

That doesn't look right - the class applied to the element is form-textfield while the css rule is targeting .form-field ?

[benjaminhorner]

Sorry. That was a typo when I wrote it here.

[bradleygore]

Ah, I see. Then I think it boils down to what exactly this plugin aims to do and the nuances of how the whole 'floating label field' concept works.

When you're dealing w/ a normal TextField, NativeScript can pad the entire field know that is all it has to worry about. However when we're using something like the SkyFloatingLabelTextField we have to understand that it internally takes the UITextField (the iOS specific instance that NS TextField creates as its native view) and makes it a sub-view of all the different views it has to build up in order to achieve the effect. Thusly, it's highly likely that it doesn't do styling just the same as the TextField does, as it has to worry about the bar, counter, error, floating label, placeholder, etc....

So, what I'd do is simply wrap it in a quick StackLayout and give it the desired padding all the way around, and your TextInputLayout would sit right inside it padded all the way around.

[benjaminhorner]

As it is iOS specific, I think the solution may rather be to target the UITextView textContainerInset property like so:

import { EventData } from "data/observable";
import { Page } from "ui/page";
import {TextView} from "ui/text-view"

export function load(args:EventData){
    var page:Page = <Page> args.object;
    var tmpTextView= page.getViewById("textView");
    if(page.ios){
        var insets = UIEdgeInsetsMake(50, 50, 100, 100);
        tmpTextView.ios.textContainerInset =insets;
    }
}

what do you think? Do you think this could be added in any way to the plugin directly?

[bradleygore]

The textContainerInset adds padding to entire view, or only around the text field portion?

I'm not actively doing NS dev at this time, nor too actively working on my plugins, so PRs are welcome.

[benjaminhorner]

Copy that. I will take a shot and see if I can make a PR.

The textContainerInset adds padding to the text field portion so it should give the same result as the padding when set to the TextView.

Thanks for your all the help and a great NS plugin.