Sabri Aziri
Sabri Aziri

Reputation: 4174

Remove button borders - nativescript

I am trying to remove borders of register button

#register{
   background-color: transparent;
   border-color: transparent;
   border: 0;
   border-width: 0;
}

border property seems like is not support in nativescript styling docs and when I use border-radius: 1 border is despairing.

Platform: android (5.0.2) and {N} 1.7.1

Upvotes: 2

Views: 3368

Answers (4)

Brijesh Lakkad
Brijesh Lakkad

Reputation: 821

I think what @Delino has mentioned has a point.

Border and background-color for Button in NativeScript are dependent on the zIndex of the button. So I believe, to remove the border, we have to specify the Index.

border-width: 0;
border-color: black;
z-index: 0;

If need to change or remove the background do the same by using zIndex.

Upvotes: 1

Codedreamer
Codedreamer

Reputation: 1702

I think you should try something like this.

.btn-nostyle {
    background-color: transparent;
    border-width: 0,
    z-index: 0;
}

Upvotes: 3

befuddled
befuddled

Reputation: 43

background-color: rgba(255, 0, 0, 0.0);
border-color:rgba(255, 0, 0, 0.0);
border-width: 1;

Above is the new way to resolve this issue as of June 2017. Credit tsonevn.

See https://github.com/NativeScript/NativeScript/issues/2626

Upvotes: 3

Nick Iliev
Nick Iliev

Reputation: 9670

I have tested a button with your styles and borders are removed with no problem. Can you specify on what platform and {N} version you are encountering this issue!? Styling background-color of Button will remove the default material design styles as described here and anti-aliasing borders were fixed with version 1.7.0 of {N} so border-radius: 1 should be working as espected.

In CSS the following code

border : 0 solid black

is identical to the following in {N} and CSS as well

 border-width : 0 
 border-color: black;

(by default border is of type solid)

So you can apply button styles without using the shorthand (border: 0 solid black;)

Upvotes: 1

Related Questions