Comments (17)
I have found another way to do it without plugins but will keep watching my question in case I need to use this plugin in future projects.
Thanks
from nativescript-platform-css.
@lumayara - Are you sure you are using the latest ns-platform and ns-platform-css?
from nativescript-platform-css.
This is not working to me too, I uses the last versión of ios, core modules and platform-css
from nativescript-platform-css.
@isaacfi -
- Are you using using NS 4.x or 3.x
- Are you using Angular; Vue, or Plain NativeScript.
from nativescript-platform-css.
- 4.x
- Angular
I've noticed that /deep/ works to override properties, but if I want to complement a class I have to avoid to use /deep/ I don't know if this is the right behavior.
from nativescript-platform-css.
I am using nativescript 4.0.1 and angular 5.1.0 and the latest version of nativescript-platform-css.
I'm using the iphone5s, iphone6 and iphonex classes and it works perfectly.
I follow the documentation instructions where I want to specify a resolution using ios640 and ios1242 but it does not work.
.ios640 :host .test { margin: 6px; width: 22px; line-height: 22px; font-size: 10px; }
from nativescript-platform-css.
Same for me.
- Device: Android. Using emulator to test the app.
- Dev Machine: MacOS
- Framework: Angular
- nativescript-platform-css: "^1.6.5",
- sass-loader: "~6.0.6"
- css-loader: "~0.28.7",
- tns-android: "4.0.1"
- tns-ios: "4.0.1"
This does not work:
.android480 :host button {
@extend %button-shared;
font-size: 19;
height: 44
}
This works
.android400 :host button {
@extend %button-shared;
font-size: 19;
height: 44
}
from nativescript-platform-css.
Appreciate your help on this.
from nativescript-platform-css.
- When starting up the application; what screen size does the platform-css say the device is?
- Which emulator (i.e. what is its settings on it).
@gustavost26 the sizes are:
[1280,1024,800,600,540,480,400,360,320]
There is no 640 unless you add it to the list.
@isaacfi
Unfortunately /deep/
and/or :host
are required with Angular because of the way it does CSS rewritting.
from nativescript-platform-css.
Yeah I'm on NS4.1 and not using Angular, and I can't seem to get it to work either.
If I manually add class="ios"
to a page then the iOS styling kicks in, so I know the CSS is correct.
Hey @NathanaelA can you just confirm if it should work with NS4x? Thanks for your help man!
from nativescript-platform-css.
Ok, working now. It must have been related to the syncing of the modified code - stopped and started the compiler, uninstalled it off the devices and now it works fine. Thanks @NathanaelA!
from nativescript-platform-css.
@datanotion - Pat, thanks for the confirmation that you got it fixed in your case. 😀
from nativescript-platform-css.
Those are demo app page on a phone and tablet emulators, guess thats working,
Then I've added a grid layout like this the same page
and the css like this
.phone .home-grid{
background-color: red;
height:100;
}
.tablet.home-grid{
background-color: black;
height:100;
}
and grid colour stays white, it doesn't seems to pick up the css
if I just use this
.home-grid{
background-color: red;
height:100;
}
then its changing background colour on both the phone and tablet.
Am I missing anything here to get it working?
from nativescript-platform-css.
@yalva - That should work; I don't see anything obvious why it wouldn't. I'll try running a test and see what happens. I assume this is NS 4.x
from nativescript-platform-css.
Yes, it is NS 4.1.1
from nativescript-platform-css.
@yalva -
So I upgraded the project to be NS4.1.3 to verify no issues with 4.x
Css:
.homegrid {
background-color: purple;
height: 50;
}
.phone .homegrid{
background-color: red;
height:100;
}
I added a default .homegrid css; so that if the phone didn't override it; I would get a purple grid. 😁
XML:
<StackLayout>
<GridLayout rows="auto,auto">
<StackLayout class="p-20">
<Label text="ns-platform-css" class="h1 text-center"/>
<TextView height="300" text="{{ data }}" editable="false" backgroundColor="#d3d3d3"/>
</StackLayout>
<Label tap="{{ tap }}" row="1" text="(c)2015-2018, Master Technology" class="text-center copyright"/>
</GridLayout>
<GridLayout class="homegrid">
</GridLayout>
</StackLayout>
Shows a red grid of 100px high after the copyright.
from nativescript-platform-css.
Thanks for your help @NathanaelA !
from nativescript-platform-css.
Related Issues (20)
- Does not work in Router-Outlets HOT 1
- incorrect calculation of space when using (true type) fonts HOT 2
- Webpack with uglify build fails in Angular app HOT 4
- It is not in ES5 HOT 1
- Use :host instead of /deep/ HOT 1
- .ios/.androidXXX not working on platform.android/ios.css HOT 4
- Doesn't work when go back HOT 7
- Not picking the style when using className HOT 5
- support the new iPhones name HOT 1
- If used with N-Vue, components not receiving platform class HOT 2
- NativeScript Angular - Styles not applied in app.component HOT 7
- Applying styles in NS Angular HOT 1
- Work on all pages without requiring in every single page HOT 3
- Not Working Effectively with Navigation HOT 16
- Fails to load plugin in Angular NS 5.4+ "Events name(s) must be string." HOT 6
- Unable to install - getting 'Not Found' HOT 1
- Cannot add new proPlugins HOT 1
- Unfinished description of enhanced modes in README. HOT 2
- TypeError: nsPlatform.screen is not a function HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript-platform-css.