font size for inputs angular

[Douglas]

I can change the label size:

<TKPropertyEditor tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle tkPropertyEditorStyle
labelTextSize="30" labelTextColor="black" stroke>
</TKPropertyEditorStyle>
</TKPropertyEditor>

 

How do I change the input size?  Nothing seems to implement css styling - which would be ideal. 

[Nick Iliev]

Hi Douglas Nelson,
Apply CSS Class
When working with the RadDataForm, what we have as options for styling is what the native controls provide us. The color of the input text for your RadDataForm can not be styled out--of-the-box for a couple of reasons. In the following lines, I will show you what are the options to style the input text and why we can not directly change the input color;

Let's take the Android implementation of RadDataForm.

<df:RadDataForm id="myDataForm" source="{{ person }}"  editorUpdate="dfEditorUpdate">

Note the editorUpdate event. This is the event we are going to use to apply advanced styling.With this event, we can access the inner element of our form like the PropertyEditors and create a fallback for each time we have and editor change.

Assuming that our form has the following property

<df:EntityProperty name="email" >
    <df:EntityProperty.editor>
        <df:PropertyEditor type="Text" >
        </df:PropertyEditor>
    </df:EntityProperty.editor>
</df:EntityProperty>

then we can access the editor and apply some advanced styling ( like bigger text) using its propertyName

export function dfEditorUpdate(args) {
    if (app.android) {
        switch (args.propertyName) {
            case "email":
               setLargeText(args.editor);
                break;
        }
    }
}

And now what we need is to create our method setLargeText, pass the editor and apply the Android predefined style.

export function setLargeText(editor) {
    console.log(editor.getEditorView())
    var editText = editor.getEditorView(); // android.support.v7.widget.AppCompatEditText

    editText.setTextAppearance(android.R.style.TextAppearance_Large); // TextAppearance_Large
}

More example of Android styles can be found here.

However, the android.support.v7.widget.AppCompatEditText does have some native limitations and one of them is setting the color of the input text. Changing the color can not be done directly on AppCompatEdittet but only through theme applied on the parent element, Example on how this is done by native Android developers can be found here. However, this scenario is not currently supported in NativeScript so the options for styling the input text are limited to what the Android method setTextAppearance is providing. Keep in mind that there are some UX considerations which are recommending that the input text should be clear and visible for the users and often the guidelines are recommending preserving the default styles.

All that said you can use editorUpdate to apply advanced styling for both iOS and Android - more examples here.


Regards,
Nikolay Iliev
Telerik by Progress

[Douglas]

Just to be clear, I'm using nativescript themes in the rest of the app.  What I am trying to achieve is consistency in the experience.

 

this application serves elderly people and the overall format needs to be larger and clearer. 

 

I may just need to move to nativescript UI elements for my forms and do my own validation logic.

[Nick Iliev]

Hey Douglas,

If the sole purpose is to make the input text larger and more cleared I think the solution provided can give you some applicable options.

Modifying the following line 

editText.setTextAppearance(android.R.style.TextAppearance_Large);

With the options that are given here can allow you to provide your users with much larger default font sizes and also with material design applied styles. Keep in mind that setTextAppearance before API23 
xneeds two arguments (app context and style) while on API23 and above you can only pass one argument (the R.style attribute). 

Regards,
Nikolay Iliev
Telerik by Progress

[Imran]

I wanted to change the Font Size of a Text field (initial on android platform) , after spending considerable amount of time I was able to do using "setTextSize" , I tried using "setTextAppearance" method before but got an error of method not found.

Now I want to change the Text Size of a List picker (RadDataForm) , so need help for this. I also want to ask should there a detailed documentation/example for doing these of operation ? All I find are bit and pieces here and there on forums or Stackoverflow, this wastes so much time.

Thanks

[Nick Iliev]

Hello David,

The RadDataForm is using the ListPicker control behind which stands android.widget.NumberPicker on Android and UIPickerView on iOS.
Both native controls are not exposing font size related properties or methods and by design are meant to have common UI for all users.
There are possibilities to style the color and backgroundColor for ListPicker in NativeScript but no option to change the text size.
Even native Android developers are struggling with this issue (see here) and providing custom hacky solutions which are working on a specific API level or not currently working at all.

The support for changing default fonts and font-size for ListPicker is logged here as a feature but is not backlogged for the reasons above.

Thank you for noticing the need for documenting these options - our current policy is to document only things that are officially supported and implemented in native iOS and Android and would have consistent behavior on both platforms. So for example, as the NumberPicker does not provide an official Android way to change its font-size even if some of the hacky solutions in StackOverflow are working we won't recommend via docs article as they are not officially supported and might cause different behavior on different API levels. Good place for some of can be found here and also in the community slack channel.

Regards,
Nikolay Iliev
Progress Telerik

[Nikolay Tsonev]

Hello all,

I would like to let you know that we are closing UI for NativeScript Forum section in Telerik Admin in favor of NativeScript forum. 
Since UI for NativeScript is free for using we consider that the best place for discussions and for questions will be the official NativeScript forum.

Regards,
nikolay.tsonev
Progress Telerik