This question is locked. New answers and comments are not allowed.
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.?
5 Answers, 1 is accepted
0
Accepted
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
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
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
;
}
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
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Dimitar
Top achievements
Rank 1
answered on 15 Aug 2017, 01:54 PM
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 .
0
Dimitar
Top achievements
Rank 1
answered on 15 Aug 2017, 02:07 PM
One more thing , how I could change the cursor color?
0
Dimitar
Top achievements
Rank 1
answered on 15 Aug 2017, 02:08 PM
One more thing , how I could change the cursor color?
0
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:
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
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
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.