Bottom border color TextField

[Dimitar]

Hi , 

Is there a way to change the bottom border color and focus bottom border color of text field. I have found some solutions , but there are only for iOS or only for Android, nothing general.?  

 

 

[Nick Iliev]

Hi Dimitar,

To change the bottom border color of Textield you can use border-width and border-bottom-color CSS properties (or directly their respective inline ones).

e.g.CSS

TextField {
    border-width: 0 0 5 0;
    border-bottom-color: red;
}

The above CSS will result in red bottom color on both iOS and Android. A real example is demonstrated in this test application.

Regarding the second part of your question (" focus bottom border color of text field") I am not entirely sure that I am understanding the question but if you need to manually focus the TextField (invoke the keyboard) you can call focus method with a small amount of timeout (as the keyboard can be triggered only after the whole UI is rendered). For example, I have demonstrated the focus method here while using the loaded event for the TextField. Note that this would trigger the keyboard on a real iOS device but might not trigger it on simulators.

Regards,
Nikolay Iliev
Progress Telerik

[Dimitar]

Thank you for your help. It resolves my issue . My second question was how change the focus color , but it seems the way changing the bottom line resolves also the second issue.

Thank you . 

[Dimitar]

One more thing , how I could change the cursor color? 

[Dimitar]

One more thing , how I could change the cursor color? 

[Nick Iliev]

Hello Dimitar,

To change the default cursor color, we would need to change the accent color set in our app/App_Resources/Android/values/colors.xml

For example:

<!-- main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
  <StackLayout>
    <TextField id="textFieldid" hint="Sample text" text="" />
  </StackLayout>
</Page>

<!-- app/App_Resources/Android/values/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ns_primary">#F5F5F5</color>
    <color name="ns_primaryDark">#757575</color>
    <color name="ns_accent">#0d0d0d</color>
    <color name="ns_blue">#272734</color>
</resources>

<!-- app/App_Resources/Android/values-v21/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ns_accent">#0d0d0d</color>
</resources>

After changing the accent color in your resource files you will need to rebuild the project in order for the changes to take effect. Solution based on this discussion

Regards,
Nikolay Iliev
Progress Telerik