2

I have a button:

<Button text="TodoSomething" cssClass="button" tap="signIn"/>

platform.android.css

.button{
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;}

But border-radius doesn't work. At Supported Properties written that Native Script support border-radius

0

1 Answer 1

11
<Button cssClass="myclass" />

.myclass {
  border-radius: 80;
}

Is the way to do it. However, please note that there's currently a bug which makes radius not work on certain devices. See: https://github.com/NativeScript/NativeScript/issues/830

Example of rounded buttons: https://github.com/NativeScript/NativeScript/blob/master/apps/ui-tests-app/image-view/rounded-buttons.xml

Also:

In your example you're writing CSS. The language to style NativeScript applications is not CSS but rather a language of its own. However, as CSS is something that many people understand it borrows very heavily from it. But what this means is that e.g.:

  • You can not use size definitions such as px, em, etc. The size format in NativeScript (and pretty much all Mobile development) is DIPs and you don't specify that. Therefor you want to write: border-radius: 80 and not border-radius: 80px. This is not css.
  • You can't write stuff like -webkit-border-radius: 80px;, it's simply invalid. The NativeScript "css" is not rendered in a WebKit browser but rather converted into something iOS/Android understands.
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.