locked
Adjusting popup width and height breaks page behind RRS feed

  • General discussion

  • Hi,

    I'm having an issue i can't figure out. in my main screen i have a list (scrolls down). When click on a list item to show a popup, i also adjust the popup screen sizes' width and height using jquery like this:

        $('div[class~="msls-dialog-frame"]').css("max-width", "800px");
        $('div[class~="msls-dialog-frame"]').css("margin-left", "0px");
        $('div[class~="msls-dialog-frame"]').css("margin-top", "0px");

       $('div[class~="msls-content"]').css("height","800px");

    the above code makes the screen size the way i need it to be. the issue happens when i close the popup, for some reason i can't scroll up and down the screen anymore, it's just stuck where i left it, and i don't know why.

    has anyone else ever seen this?

    if i don't adjust the screen at all with jquery everything is fine, but i need the extra space.

    Thank You.

    • Changed type Angie Xu Friday, December 20, 2013 2:59 AM
    Thursday, December 12, 2013 11:46 PM

All replies

  • Hi,

    Since I can't reproduce your issue on my side, you can provide me with your scenario below or report it in this site. http://connect.microsoft.com/

    Best regards

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, December 20, 2013 3:03 AM
  • I strongly suspect it's the $('div[class~="msls-content"]').css("height","800px"); line that's messing things up.  The .msls-content class is very broad, and as a result you're probably changing the CSS of more elements than you need to.  Try narrowing your selection.

    One other piece of advice:  jQuery best-practice is to limit the number of DOM manipulations, since each $('...') slows down your application even if only slightly.  Therefore, the 3 .msls-dialog-frame style changes can be consolidated to:

    $('.msls-dialog-frame').css( 
    { "max-width" : "800px",
    "margin-left" : "0px",
    "margin-top" : "0px" });


    Friday, December 20, 2013 4:50 AM