locked
Style of win-flyout loosing over after navigation. RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    I have a button and I'm showing a fly out which contains a list view of items. The fly out appears neatly prior to any navigation takes place. But after making a navigation, and getting back to the page and viewing the fly out, the fly out looses the back ground applied, seems to be getting applied with the transparent colour.

                              The style of fly out is over ridden in the page which is navigated too. So on getting back to previous page seems to be transparent property indulged in the page 2 getting overridden in page 1.

    Following are style sheet in Page1 and page 2.

    if !important is not placed the style of Page1 is getting over ridden in Page2

    THE ISSUE COMES WHILE NAVIGATING FROM PAGE2 TO PAGE 1

    //Page1

.win-flyout {
    background-color: rgb(0,114,52) !important;
    width: 400px;
    height: 428px;
} 


//Page 2

.win-ui-light.win-flyout, .win-ui-light .win-flyout {
    border-color: rgb(0, 0, 0);
    background-color: transparent !important;
    border-width: 0px;
    width: auto !important;
    height: auto !important;
}

     

     

    Thanks & Regards Tejaswi Chandrapatla


    • Edited by Teja510 Friday, November 8, 2013 1:55 PM
    Friday, November 8, 2013 1:53 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Generally, any time you modify a global style class like .win-flyout, whatever style is defined in the last-loaded CSS file will win and be the style in effect. It's important to understand here that when you're using page controls, you're always staying in the context of default.html, even though you conceptually think of navigating between different HTML pages.

    The result of this is that all your CSS references in the page control .html files are cumulative. Those CSS stylesheets are not unloaded with page navigations unless you do a little more work to replace <link> elements in the <head> element. So in your case, you have multiple stylesheets that each override .win-flyout, so therefore whichever .css file is loaded last will define the style from then on.

    The upshot of this is that you should scope your page-specific style rules with a page-specific selector. E.g., set "page1" and "page2" classes on your top-level divs, then scope your selectors like .page1 .win-flyout to keep them from interfering with one another.

    I talk about page-specific styling in Chapter 3 of my second edition preview linked below.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.


    • Marked as answer by Teja510 Wednesday, November 20, 2013 5:33 AM
    Tuesday, November 19, 2013 5:04 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    Can you isolate your problem to a simple repro and share it via SkyDrive? That way we will be able to provide you better assistance.

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Saturday, November 9, 2013 12:02 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    Please click on the link for the sample on sky drive

    Thanks & Regards Tejaswi Chandrapatla

    Monday, November 11, 2013 5:10 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    I downloaded the project called "TestApp", but I only see 4 buttons which is different from the above problem that you have described. Can you upload the actual problem project or tell me how to emulate the above problem using the project you shared?

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Monday, November 11, 2013 6:17 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Sorry Prashant for a wrong link.

    Here is the link for the solution which i was seeking help for.

    Thanks & Regards Tejaswi Chandrapatla

    Tuesday, November 12, 2013 3:45 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    I done it by adding one more div in the fly out div and applying styles to that instead of fly out div.. Don't know whether  this should be done.. As of now seems to be like a work around.. If any best solution, please share up..

    Thanks & Regards Tejaswi Chandrapatla

    Tuesday, November 19, 2013 7:59 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Generally, any time you modify a global style class like .win-flyout, whatever style is defined in the last-loaded CSS file will win and be the style in effect. It's important to understand here that when you're using page controls, you're always staying in the context of default.html, even though you conceptually think of navigating between different HTML pages.

    The result of this is that all your CSS references in the page control .html files are cumulative. Those CSS stylesheets are not unloaded with page navigations unless you do a little more work to replace <link> elements in the <head> element. So in your case, you have multiple stylesheets that each override .win-flyout, so therefore whichever .css file is loaded last will define the style from then on.

    The upshot of this is that you should scope your page-specific style rules with a page-specific selector. E.g., set "page1" and "page2" classes on your top-level divs, then scope your selectors like .page1 .win-flyout to keep them from interfering with one another.

    I talk about page-specific styling in Chapter 3 of my second edition preview linked below.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.


    • Marked as answer by Teja510 Wednesday, November 20, 2013 5:33 AM
    Tuesday, November 19, 2013 5:04 PM