Bottom border color TextField

6 posts, 1 answers
  1. Dimitar
    Dimitar avatar
    42 posts
    Member since:
    May 2014

    Posted 14 Aug Link to this post

    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.?  

     

     

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 15 Aug Link to this post

    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
    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.
  3. Dimitar
    Dimitar avatar
    42 posts
    Member since:
    May 2014

    Posted 15 Aug in reply to Nikolay Iliev Link to this post

    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 . 

  4. Dimitar
    Dimitar avatar
    42 posts
    Member since:
    May 2014

    Posted 15 Aug Link to this post

    One more thing , how I could change the cursor color? 
  5. Dimitar
    Dimitar avatar
    42 posts
    Member since:
    May 2014

    Posted 15 Aug Link to this post

    One more thing , how I could change the cursor color? 
  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 16 Aug Link to this post

    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 -->
      <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.
Back to Top