CODEWITHSUNDEEP
nativescriptangular2-nativescript
user2094257
user2094257

Reputation: 1715

borderColor and borderRadius styles not being applied to a StackLayout

I am trying to create a border-radius and border-color around a StackLayout but for some reason the styles doesn't get applied... I am using the Nativescript core-light theme, not sure if that can override my inline styles? Any idea what i'm doing wrong?

my code:

        <StackLayout borderRadius="5px" borderColor="blue">         
            <Label class="body" [text]="'Description:  ' + product.Description"></Label>
            <Label class="body" [text]="'POS Description: ' + product.POSDescription"></Label>
            <Label class="body" [text]="'POS price:  R' + product.POSPrice"></Label>
            <Label class="body" [text]="'Stock On Hand:  ' + product.StockOnHand"></Label>
        </StackLayout>

Upvotes: 1

Views: 272

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

You need to set explicitly borderWidth and your code will work. e.g.

<StackLayout borderRadius borderWidth="2" borderRadius="15" borderColor="blue">

Notice that I am using DPs (device independent pixels) instead of px which in the mobile world with different screen densities and resolutions should be the better approach.

You can also use CSS for your borders e.g.

.borders {
    border-width: 2;
    border-color: red;
    border-radius: 20;
}

Upvotes: 1

Related Questions