Doesn't work when go back

[iMarwan-k]

Hi,

so I have 2 pages and for both of them, I'm using the tools.

I have welcome page and login page

in welcome, I have a button that goes to login page

I use the following code to go back from login to welcome in login.ts goBackToMain(){ this.routerExtensions.back(); }

in login HTML page I use a button that on tab call the method <Button text="Register" class="secondaryBtn" (tap)="goBackToMain()"></Button>

so when I click that button "Regester" and click login button in the welcome page the .iosXXX classes doesn't work

here is welcome page

this is what it should look like always

this is what happen when I click login again

[iMarwan-k]

I found out that /deep/ works better than :host

so what I did is /deep/ .ios414 Button

it was .ios414 :host Button

Can you please confirm which keyword we should use

[NathanaelA]

I was told that :host was better to use as it applies locally; but there are cases where /deep/ works better which is why I list both in the docs..

[Burgov]

but isn't /deep/ deprecated?

[NathanaelA]

/deep/ is deprecated; but it hasn't gone away because their is no good replacement. From what I understand it will remain for pretty much forever....

[ntaylor2]

I'm seeing the same issue on Android but using /deep/ does not fix the issue. I'm using the selector below and the styles are only applied upon first navigating to the page. Any suggestions? I'm also confused why I would need to use the /deep/ selector on this occasion because my second component is loaded via a separate angular route that is a sibling of the first page.

/deep/ .android360 .back-arrow, .android360 :host .back-arrow

[NathanaelA]

Can you try putting the /deep/ .android360 .back-arrow, .android360 :host .back-arrow in your root application primary glovbal css file and see if it works properly. This will tell me if the issue is the loading and applying or something else breaking...

[ntaylor2]

@NathanaelA Thanks for the quick reply. I've been tinkering with this for the past couple of hours and I think my issue had nothing to do with this plugin. I was declaring the same CSS selector multiple times and I think it was causing issues.

Originally I was doing something like this and it was causing problems:

.back-arrow {
    color: #2699FB;
    font-size: 24;
    background-color: rgba(255, 0, 0, 0.0);
    border-color: rgba(255, 0, 0, 0.0);
    border-width: 1;
}

/* Layout specific properties */
.back-arrow {
    margin-top: 30;
    margin-left: 20;
}

/deep/ .android360 .back-arrow, .android360 :host .back-arrow {
    margin-top: 0;
    margin-left: -35;
}

After I combined into one CSS class things started behaving normally again:

.back-arrow {
    color: #2699FB;
    font-size: 24;
    background-color: rgba(255, 0, 0, 0.0);
    border-color: rgba(255, 0, 0, 0.0);
    border-width: 1;
    margin-top: 30;
    margin-left: 20;
}

/* Layout specific properties */
/deep/ .android360 .back-arrow, .android360 :host .back-arrow {
    margin-top: 0;
    margin-left: -35;
}

The only reason I split them out to begin with was so it was more clear which properties would change depending on the screen size. No big deal to combine them back into one selector.