Nativescript: .ns-android and .ns-ios styles are not applied for modal-pages

Created on 11 Oct 2019  路  2Comments  路  Source: NativeScript/NativeScript

Environment

  • CLI: 6.1.2
  • Cross-platform modules: 6.1.1
  • Android Runtime: 6.1.2
  • iOS Runtime: 6.1.0
  • Plugin(s): -

Describe the bug
We want to define platform-sepecific css styles like this:

.ns-android Page {
    background-color: lightgray;
}

.ns-ios Page {
    background-color: greenyellow;
}

.ns-android .switch[checked=true] {
    color: #589948;
    background-color: #589948;
}

.ns-android .switch[checked=false] {
    background-color: #333333;
}

.ns-android .my-button {
    background-color: #fcfdf7;
    color: #589948;
}

.ns-ios .switch[checked=true] {
    color: #f07800;
    background-color: rgba(240, 120, 0, 0.3);
}

.ns-ios .my-button {
    background-color: #fafbfb;
    color: #f07800;
}

Those styles are correctly applied for elements that are placed in a normal page, but they are totally missing in a modal-page for both Android and iOS.
(I have not tested .ns-portrait, .ns-tablet etc as we only need the platform classes at the moment).

NSStyleIssue

Also, in the beginning of the GIF you can see a strange effect for the Switch component on Android: when clicking the Switch, it is colored blue for a short time, which is the default accent-color. This effect does not occur for normal styles (without .ns-android).

To Reproduce
Just open the sample app provided below.

Expected behavior
The styles should be applied for elements on a modal-page the same way they are working for normal pages.

Sample project
NSStyleIssue.zip

bug css enhancement

Most helpful comment

Yes, also ns-light/ns-dark are not added to modals.

All 2 comments

@felix-idf what appears to happen here is that modal pages are having their own root CSS style called ns-modal.

.ns-modal .switch[checked=true] {
    color: #589948;
    background-color: #589948;
}

.ns-modal .switch[checked=false] {
    background-color: #333333;
}

The thing is that ns-modal won't work along ns-android/ns-ios so I am marking this one as a bug or/and enhancement issue.

Yes, also ns-light/ns-dark are not added to modals.

Was this page helpful?
0 / 5 - 0 ratings