0

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?

Improve this question

3 Answers 3

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you Nick. I had already changed that too. There were some other rules in a few elements that were not being applied either. Could it be settings on my project that ignored certain changes when saving in order to save time updating?
I doubt it's caused by settings - there were some fixes introduced for livesync but in order to apply them you will need the @next release (npm uninstall -g nativescript .... npm install -g nativescript@next ... remove platforms folder and re-run livesync) .
1

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.

Improve this answer

3 Comments

Just tried the '>' child selector as you suggested but it didn't work either. Is most likely a my mistake and I'm not finding it so I'll keep trying before filing a bug. I really miss the Chrome inspector here...
The core team is focused on debugging and tooling for 2.5 and at one time there was rumor an inspector was going to show up real soon so let's hope it's next month's release :) Ive felt your pain here before. So the child selector is only the first child and the space as you have it should do all children. I've never tried that so I can't be certain. I would try adding a class as the other answer suggests, at least it's a work around if the selector is a bug
Already tried using a class on those buttons but it didn't work either. I do have a Page { color:darkred; } rule on app.css that, as you can see on the image, is working fine so tag selectors don't seem to be the problem.
1

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.

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.