Mobile CSS stylesheets lifecycle

Mobile CSS stylesheets lifecycle

  

I am trying to fix a bug in my mobile application where the css of a page isnt available yet until the screen is mid transition (atleast it feels like it is). 

I have included a screenshot (Animation bug edit.png) that shows css sheets that are currently loaded during transition. This is what it should look like after transition. (Screenshot)

If you open the attached file you can see that my bottom buttons are stacked ontop of each other before the transition starts.

The Buttonbar.css and Jobscreen.css should be loaded before the transition starts to avoid my styling bug. I am trying to avoid adding the styling on the theme since I want css code to be specific to this page only.


I am using Platform: 10.0.708.0 with the latest silk ui mobile version installed.

Kind regards,

Ricardo


Hi Ricardo,

Perhaps your answer can be found here. Scroll down to the "On Navigating Between Screens" section.

EDIT: Unfortunately, it doesn't say anything about CSS, just the DOM...

Hi Ricardo,

Please refer to the Mobile Application Architecture course, in particular the Plugins, UI & Security lesson (around the 4:26 mark).

What you want to achieve is actually going against mobile architecture best practices.

Jorge Martins wrote:

Hi Ricardo,

Please refer to the Mobile Application Architecture course, in particular the Plugins, UI & Security lesson (around the 4:26 mark).

What you want to achieve is actually going against mobile architecture best practices.

@Jorgen Thank you, I assumed beforehand that a viable solution to the problem would be to add the css to the theme for exactly this reason. I think using css screen selectors would be necessary in order to keep the styling organized and hopefully preventing any class corruption.

@Killian Thank you for the link, but like you said it doesn't mention any css.