Nativescript-ui-feedback: RadAutoCompleteTextView - Can't style font color and size for the editable TextView

[NickIliev]

Reproducible on both platforms (Android and iOS).

_Steps to reproduce:_
Try to style color or font-size for the main editable text view (in which the users uses for input).
The color and font-size will apply to the suggestion items but won't be respected for the main text-view.
In the same time, CSS properties as background-color or background-image will be applied on the editable text-view but won't be respected for the suggestion items.

Related to t.1091355.

As a temporary workaround the following snippet is suggested:

export function onRadAutoLoaded(args: AutoCompleteEventData) { 
    var autocomplete = <RadAutoCompleteTextView>args.object;

    autocomplete.backgroundImage = "res://icon"; // will be set only for the EditText
    autocomplete.borderColor = new Color("yellow"); // will be set only for the EditText
    autocomplete.borderWidth = 5; // will be set only for the EditText

    console.log(autocomplete.android); // com.telerik.widget.autocomplete.RadAutoCompleteTextView
    var rad = autocomplete.android;

    console.log(rad.getTextField()); //  android.widget.EditText
    var nativeEditText = rad.getTextField();

    nativeEditText.setTextColor((<any>android.graphics).Color.RED);
    nativeEditText.setTextSize(48);
}

[NickIliev]

Add option to style the text filed font-family and padding.
Requested by t.1100656

Workaround provided as follows:

export function onRadAutoLoaded(args: AutoCompleteEventData) {
    var autocomplete = <RadAutoCompleteTextView>args.object;


    console.log("autocomplete.android: " + autocomplete.android);
    // com.telerik.widget.autocomplete.RadAutoCompleteTextView
    var rad = autocomplete.android;

    console.log("nativeEditText: " + rad.getTextField()); //  android.widget.EditText
    var nativeEditText = rad.getTextField();

    nativeEditText.setTextColor((<any>android.graphics).Color.RED);
    nativeEditText.setTextSize(48);

    var currentApp = fs.knownFolders.currentApp(); // get the currwent app directory

    // concatanate the currentApp.path + the inner path to the font we are going to use
    var fontPath = currentApp.path + "/fonts/Nasalization.ttf";

    nativeEditText.setTypeface(android.graphics.Typeface.createFromFile(fontPath));
    nativeEditText.setPadding(50, 10, 30, 100);
}

[hettiger]

Font size and color won't be enough. We also need background colors for the textfield, and the suggestion view. Currently it is very difficult to workaround. In fact I still don't have found all the native views that I need to apply my background color to. here's what I currently have:

    private onPageLoaded() {
        (global as any).autocmp = this.autocmp;
        this.autocmp.autoCompleteTextView.nativeView.noResultsLabel.text = "";

        if (isAndroid) {
            this.autocmp.autoCompleteTextView.nativeView.backgroundColor = new Color(
                this.sassVariables['$color-light-background'].value.hex
            ).android;
        } else if (isIOS) {
            this.autocmp.autoCompleteTextView.nativeView.backgroundColor = new Color(
                this.sassVariables['$color-light-background'].value.hex
            ).ios;

            this.autocmp.autoCompleteTextView.suggestionView.ios.backgroundColor = new Color(
                this.sassVariables['$color-light-background'].value.hex
            ).ios;
        }
    }

A better way to set a custom no results text would be amazing too.

[nuno-barreiro]

Hi @NickIliev

Also had same problems attempting to style a RadAutoCompleteTextView control. Not all the CSS classes were applied but I was able to change the font face, size and padding programmatically. Insted o NS Core I'm using NS+ng and I just blogged a solution that works both in Android and iOS.

You, or anyone else that needs it can find my post at "Styling RadAutoCompleteTextView with Nativescript + Angular2". Hopefully it will also help anyone that tries to pick up this issue and submit a PR for its definitive resolution.

The final solution was based on your comments, so thank you a lot for that! 👍

Edit: Updated link to blog post

[mr-White]

+1

Would love to see support for styling all these elements

[racknoris]

Also, is there a way to make the "X" (clean all items) invisible?

edit:
There is indeed a way: using @NickIliev 's code,

var autocomplete = <RadAutoCompleteTextView>args.object;
autocomplete.showCloseButton = false;

[suparnavg]

@lusocoding checked out your blog post, thanks! However the official docs don't have the loaded event on the autocomplete entity.. also adding the loaded event makes the app crash.

[progressify]

Hi, any solution to this problem?
In my project, for change colour at datapicker I have changed the primary colour of the application
In radautocomplete I must set the black colour for text in the field

[keithgulbro]

Hi @NickIliev

Also had same problems attempting to style a RadAutoCompleteTextView control. Not all the CSS classes were applied but I was able to change the font face, size and padding programmatically. Insted o NS Core I'm using NS+ng and I just blogged a solution that works both in Android and iOS.

You, or anyone else that needs it can find my post at "Styling RadAutoCompleteTextView with Nativescript + Angular2". Hopefully it will also help anyone that tries to pick up this issue and submit a PR for its definitive resolution.

The final solution was based on your comments, so thank you a lot for that! 👍

@lusocoding The article you referenced is no longer available. Please provide a new link if it exists.

[nuno-barreiro]

Hi @keithgulbro, thanks for the heads up. I've updated the link to the blog post in my comment above, but please find it also here

[tgpetrov]

Hi guys,
We have extended the CSS support of RadAutoCompleteTextView for the 5.1.0 release of nativescript-ui-autocomplete. Here are the docs and examples:

• NS Core - docs, example
• NS with Angular - docs, example
• NS with Vue - docs, example

You can have a look and log a new issue if you need something that is missing.