Not Working Effectively with Navigation

[s-doddapaneni]

None of the CSS is being constant in the entire application.

It is going to default after a while or user click.

[NathanaelA]

Are you using Angular or Vue, or Standard NS?

[s-doddapaneni]

I am using Angular.

On Tue, Jan 22, 2019 at 10:52 PM Nathanael Anderson < [email protected]> wrote:

Are you using Angular or Vue, or Standard NS?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NathanaelA/nativescript-platform-css/issues/25#issuecomment-456660317, or mute the thread https://github.com/notifications/unsubscribe-auth/Al74rtt3HENyJXJyzv4LfuMF6MggilO5ks5vF9yNgaJpZM4aNbJw .

[s-doddapaneni]

CSS is getting applied for the first time, if I navigate through my application or come back to login page by signing out. For the next login, the CSS is not getting applied to that. It is applying only for the first time when I build the application.

[NathanaelA]

Is this while just running the app; or when you are using LiveSync/HMR to update the app?

[s-doddapaneni]

Actually both. While running the app and also while using LiveSync/HMR

On Wed, Jan 23, 2019 at 8:53 PM Nathanael Anderson [email protected] wrote:

Is this while just running the app; or when you are using LiveSync/HMR to update the app?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NathanaelA/nativescript-platform-css/issues/25#issuecomment-457036555, or mute the thread https://github.com/notifications/unsubscribe-auth/Al74rqDZC_5wrtxMczO7te3dQBuOsiFvks5vGRItgaJpZM4aNbJw .

[NathanaelA]

LiveSync/HMR will typically overright the values frequently; that is not expected to work. But if you started the app and are just navigating in the app (w/o ever using HMR/LiveSync) and it is failing then that is a problem.

[s-doddapaneni]

Does that problem is related to webpack ?

On Wed, Jan 23, 2019 at 9:36 PM Nathanael Anderson [email protected] wrote:

LiveSync/HMR will typically overright the values frequently; that is not expected to work. But if you started the app and are just navigating in the app (w/o ever using HMR/LiveSync) and it is failing then that is a problem.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NathanaelA/nativescript-platform-css/issues/25#issuecomment-457044466, or mute the thread https://github.com/notifications/unsubscribe-auth/Al74rou-vFlcah4Oc43jkHdJcUrpSDD6ks5vGRwmgaJpZM4aNbJw .

[NathanaelA]

Well, LiveSync/HMR is specially because it hijacks things to replace things while the app is running so you can see any of your development changes live --- however this can also reset the CSS rules when it resets the page(s). LiveSync/HMR is specially for development of app; not what a normal user would see/use.

So if you start the app normally on a device and then do your navigation in app, and navigate back to the main screen and it fails; then that is an issue in the plugin. But if you are using HMR/LiveSync to update the development; then that is a side effect of using HMR/NativeScript... Does that make sense?

[s-doddapaneni]

Yes. That makes sense: But if I start the app normally on a device and then do some navigation or navigate back to main screen. Yes it is failing again.

On Wed, Jan 23, 2019 at 10:23 PM Nathanael Anderson < [email protected]> wrote:

Well, LiveSync/HMR is specially because it hijacks things to replace things while the app is running so you can see any of your development changes live --- however this can also reset the CSS rules when it resets the page(s). LiveSync/HMR is specially for development of app; not what a normal user would see/use.

So if you start the app normally on a device and then do your navigation in app, and navigate back to the main screen and it fails; then that is an issue in the plugin. But if you are using HMR/LiveSync to update the development; then that is a side effect of using HMR/NativeScript... Does that make sense?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NathanaelA/nativescript-platform-css/issues/25#issuecomment-457052789, or mute the thread https://github.com/notifications/unsubscribe-auth/Al74ruv3W6nZUY1l79GW9Lb1rkw28_mVks5vGScsgaJpZM4aNbJw .

[NathanaelA]

Well then that is a problem with the plugin. Any chance you can create a sample app that shows it failing. Having a real app that fails is 99% of solving the issue. :grinning:

[s-doddapaneni]

Yes. I can create a sample app and share that with you or may be I can share it in playground as well.

On Wed, Jan 23, 2019 at 10:37 PM Nathanael Anderson < [email protected]> wrote:

Well then that is a problem with the plugin. Any chance you can create a sample app that shows it failing. Having a real app that fails is 99% of solving the issue. 😀

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NathanaelA/nativescript-platform-css/issues/25#issuecomment-457055129, or mute the thread https://github.com/notifications/unsubscribe-auth/Al74rtVRFyPIdpIl6Aas6nRiioktkVRZks5vGSp5gaJpZM4aNbJw .

[s-doddapaneni]

SampleNS.zip

Please find the attachment of a sample project with the plugin added.

I tried to add platform specific CSS for a class where it is getting applied only for the first time and when you go back and come there again, It is not getting applied.

You can install this and check it once. There is a problem with the plugin itself.

Above attachment is a NativeScript Angular project.

[s-doddapaneni]

Did you able to run that sample project. Did you face the same issue?

[NathanaelA]

Sorry I haven't had time yet; too many other paid projects that I've been working on. It is in my list; but paid work always comes first... :grinning:

[s-doddapaneni]

I found out the exact problem. It is with the navigate method. Using any type of navigation is causing this issue. For example: I have used this.router.navigate and also this._routerExt.navigate.

If I go with this.routerext.back() will work but in my case, I need to navigate back to first component from nested children.

[danielnitu]

I can confirm this is an issue as well. Any element targeted with the library's classes will have the styling applied at first, but as soon as you navigate to another view and back the styling's gone.

For the moment I'm styling elements programatically from the component:

import { Component, OnInit } from '@angular/core'

import {screen, isAndroid} from "tns-core-modules/platform/platform"
import { Page } from 'tns-core-modules/ui/page/page'

@Component({
        moduleId: module.id,
	selector: 'sign-in',
	templateUrl: './sign-in.component.html',
	styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {

	constructor(
            private page: Page
        ) { }

	ngOnInit() {
            this.adaptLayout()
        }

        // Check the screen's width and hide the element on small screens
        private adaptLayout() {
            if (isAndroid) {
                if (screen.mainScreen.widthDIPs <= 360) {
                    this.page.addCss(".city { visibility: collapse; }")
                }
            }   else {
                if (screen.mainScreen.widthDIPs <= 320) {
                    this.page.addCss(".city { visibility: collapse; }")
                }
           }
        }
}