Styling labels with borders

7 posts, 2 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 12 Jan 2015 Link to this post

    Hi,
    I'm trying to work out how to add a border with rounded edges around a label in NativeScript. It's a fairly common way to decorate or emphasis text in apps and, in HTML/CSS, would be achieved with the following markup:

    HTML
    <div class="withBorder"><span>Label name</span></div>

    CSS
    .withBorder {
       border: solid 1px #f00;
       border-radius: 3px;
    }

    I guess adding support for border and border-radius CSS selectors in NativeScript would be one suggestion. Or is there a way to do it already using panels and geometry properties?

    Regards, Ian
  2. Alex
    Admin
    Alex avatar
    129 posts

    Posted 13 Jan 2015 Link to this post

    Hello Ian,
    Thanks for the feedback.
    Currently, NativeScript does not support border CSS property and there is no Border content view that can be used to add borders around UI views. We will probably implement one of those approaches in the future to support borders in NativeScript apps.

    Regards,
    Alex
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 13 Jan 2015 in reply to Alex Link to this post

    Hi Alex,
    Thanks for the update. Can you suggest any current options for achieving a display as illustrated in the screenclip below - I thought I'd try porting part of an existing KendoUI Mobile app over to NativeScript and wanted to show a time inside a coloured background.

    If you are considering future options for this type of requirement, I'd imagine a method such as using CSS border/border-radius attributes would be best as that would presumably generate a vector-based background shape that would scale automatically to different phone resolutions. The prospect of having to create lots of image files for different handsets would be rather tedious.
    Regards, Ian





  4. Answer
    Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 16 Jan 2015 Link to this post

    Hello Ian,

    We've added Border component and you will be able to use it in the next version. Here is an example:
    <Border cornerRadius="10" borderWidth="2" borderColor="#FF0000" style="background-color: blue">
         <Label text="Some text"  />
    </Border>


    Regards,
    Vlad
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 16 Jan 2015 in reply to Vlad Link to this post

    Hi Vlad,
    That's great news - a very useful enhancement.

    Thanks, Ian
  6. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 30 Jan 2015 Link to this post

    Hi Vlad,
    Apologies for opening up this post again but I had a question about your proposed support for the border cornerRadius property you're planning to introduce.

    As well as coding something like cornerRadius="5", will it be possible to specify four separate values (as you do now on the margin selector) so that you could have different radius values for the top-right, bottom-right, bottom-left and top-left corners? 

    This would allow you to easily style horizontal or vertical button groups where only some of the corners need to be rounded as illustrated in the attached screenclip. The corresponding XML might be something like:
        <Border cornerRadius="0 0 5 5" ... />
        <Border cornerRadius="5 5 0 0" ... />

    Will that be possible? 

    Best regards, Ian
  7. Answer
    Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 02 Feb 2015 Link to this post

    Hi Ian,

    No need for apologies!

    It's a really nice suggestion which we will do our best to have in a short time (hopefully in a release or two). The telerik points in your account got increased as a sign of appreciation.

    Kind regards,
    Erjan Gavalji
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top