Nativescript: Style: scoped styles on elements apply globally to dialogs (alert,confirm,prompt,actionsheet,etc.) instead of respecting the scope

[NathanWalker]

.modal-action-bar Button {
  color:#fff;
}
.modal-action-bar Label {
  color:#fff;
}

Styling like the above will cause ALL dialog (alerts,prompts,confirm,actionsheet,etc.) to have white color text instead of respecting the class scoping.

[tsonevn]

Hi @NathanWalker,

I review this issue, however I was unable to reproduce the problem. Could you give me more specific example how to reproduce this problem or to send me sample project. I am attaching my sample code and the result.

app.css

.title {
    font-size: 30;
    horizontal-align: center;
    margin: 20;
}

button {
    font-size: 42;
    horizontal-align: center;
}

.message {
    font-size: 20;
    color: #284848;
    horizontal-align: center;
    margin: 0 20;
    text-align: center;
}
.layout Button{
    color:red;
}
.layout Label{
    color:green;
}

.modal-action-bar{
    background-color:blue;
}

.modal-action-bar Button {
  color:#fff;
}
.modal-action-bar Label {
  color:#fff;
}

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">

  <GridLayout rows="auto *" columns="*">
    <StackLayout row='0' col='0' height="50%" class="layout">
        <Label text="Tap the button" class="title"/>
        <Button text="TAP" tap="{{ onTap }}" />
        <Label text="{{ message }}" class="message" textWrap="true"/>
      </StackLayout>
      <StackLayout class="modal-action-bar" row='1' col='0' height="50%">
          <Label text="sample text" textWrap="true" />
          <Button text="TAP2" tap="{{ onTap }}" />
      </StackLayout>
  </GridLayout>

</Page>

iOS

Android

Let me know whether this helps.

[NathanWalker]

Hi @tsonevn, thank you for investigating this. So this has been an interesting one. I found today that it affects only dialogs it appears (alert,confirm,prompt,actionsheet, etc).

Here are steps to repro:

tns create style-test --template ng
tns plugin add nativescript-dev-sass

Change package.json to use:

"nativescript-angular": "0.1.6"

Rename app.css to app.scss.
Add this style to the bottom:

.container {
    Label {
        color:red;
    }
    Button {
        color:red;
    }
}

Open app.component.ts and make these modifications:

import * as dialogs from 'ui/dialogs';

Change inline template to:

<StackLayout>
    <Label text="Tap the button" class="title"></Label>

    <Button text="TAP" (tap)="onTap()"></Button>

    <Label [text]="message" class="message" textWrap="true"></Label>

    <StackLayout class="container">
        <Label text="Test" textWrap="true"></Label>
        <Button text="Test Button"></Button>

    </StackLayout>
</StackLayout>

Modify onTap method to:

public onTap() {
        this.counter--;
        dialogs.alert('Testing');
    }

Notice that the alert dialog will have red text!!
Strange?

[tsonevn]

Hi @NathanWalker,

I was able to recreate this issue and confirmed that this is an real problem for iOS projects, while using dialogs. In regard to that I am attaching my sample project, where this issue has been reproduced.
Sample Project

Regards,
@tsonevn

[vakrilov]

Already fix in progress in @PanayotCankov's CSS optimizations branch

[vakrilov]

@NathanWalker - In the current state parent selectors are not matched correctly when dialogs are shown - they skip the parent check and always match .

_Workaround:_ You can exploit the bug to workaround the bug. The last selectors have priority. You can define a _fake_ parent selector that will be applied on dialogs and will not affect other elements. If you put it at the end of your CSS it will be used. Something like:

.class-that-will-never-be-used {
    Label {
        color: black;
    }
    Button {
        color: blue;
    }
}

[enchev]

Hey folks,

In the current official version (2.2.1) you can style dialog buttons and globally all buttons in the app like this:

/* Will style buttons in all dialogs. */
Button {
    color: red;
}

/* Will style buttons in all pages. */
Page Button {
    color: green;
}

[PanayotCankov]

In future we can add an artificial Dialog parent to the Buttons in the dialogs when used for styling so they can be separated from the Button on the page like:

Dialog>Button { color: red; }

But for now I think @enchev suggestion together with the fixed selectors are good enough.
I am closing this issue.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.