CODEWITHSUNDEEP
cssnativescriptangular2-nativescript
zJorge
zJorge

Reputation: 798

Changes on app.css are not applied on GUI

I'm trying to change buttons default appearance on NativeScript core.light.css so after @import I added a few rules. Some are being applied but some others are not. I've been a web developer for a few years so I'm quite familiar with CSS/HTML but here I really miss a browser inspector to find out where's my mistake.

This is the CSS rule in app.css:

.nav Button {
  border: 1px solid grey;
  border-radius: 3px;
  margin: 5px;
  padding: 5px;
}

This is what I have on page.component.html:

<StackLayout class="nav">
    <Button text="First" 
        [nsRouterLink]="['/first']"></Button>
    <Button text="Second"
        [nsRouterLink]="['/second']"></Button>
    <Button text="Third"
        [nsRouterLink]="['/third']"></Button>
    <Button text="Fourth"
        [nsRouterLink]="['/fourth']"></Button>
</StackLayout>

and this is how it looks like on iOS simulator:

enter image description here

Where are the 1px solid borders? What am I missing here?

Upvotes: 0

Views: 895

Answers (3)

zJorge
zJorge

Reputation: 798

Solved. Posting here the solution in order to help future victims.

Apparently all previous configurations tried should actually work. The commonly used rule .nav Button, child selectors .nav > Button, .navbutton class applied to Button element... these are all fine. Although I had to split border: 1px solid grey; into three lines (border-width, border-color and border-style) as @Nick suggested on my accepted anwser.

At first I was using tns livesync ios --emulator --watch in order to see changes right away. When changes were not shown I closed the app, typed tns run ios and changes were shown, except for this element.

So I did tns platform remove ios, tns plantform add ios and finally tns run ios. This solved the problem. I think there's some sort of persistence or cache that picked that particular element just to annoy me.

Upvotes: 1

Nick Iliev
Nick Iliev

Reputation: 9670

Live syncing CSS files works as expected on my side. However, keep in mind that NativeScript supports only a subset of CSS and some of the syntax from web is not applicable in NativeScript

so instead of border: 1px solid grey;

use

.nav Button {
    border-width: 1;
    border-color: gray;
    border-radius: 20;
}

List of supported CSS properties can be found here

Upvotes: 3

Brad Martin
Brad Martin

Reputation: 6147

Have you tried adding the child selector to your css? https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors so a space should work :/ https://docs.nativescript.org/ui/styling#hierachical-selector-css-combinators I've only used the > selector. File a bug if you think it's not working as it should though.

Upvotes: 1

Related Questions