locked
Lightswitch popup centering not working RRS feed

  • Question

  • Hi all

    I'm trying to center popup in my lightswtich html application using this code

     $(window).one("popupcreate", function (e) {
            $(e.target).popup({
                positionTo: "window",
                transition: "flip"
            });
        });
        screen.showPopup("mypopup");

    However this is not working when I click "showPopUp" button first time. (After first click it works fine).

    Also when I apply filters in popup it  goes to origin position, so is there any other event differ to "popupcreate" , to position my popup center when applying filters.


    Tuesday, November 26, 2013 9:29 AM

Answers

All replies

  • Try the popupbeforeposition event like so:

     $(window).one("popupbeforeposition", function (e) {
            $
    (e.target).popup({
                positionTo
    : "window",
                transition
    : "flip"
           
    });
       
    });
        screen
    .showPopup("mypopup");

    Here is an example of a centered popup:

    http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1207/HUY-Volume-III-ndash-Popups-Dirty-Visual-Collections-and-Using-Prototypes-To-Calculate-Child-Collections.aspx

    • Proposed as answer by joshbooker Wednesday, November 27, 2013 6:43 PM
    • Marked as answer by Angie Xu Tuesday, December 3, 2013 11:46 AM
    Tuesday, November 26, 2013 3:13 PM
  • Try this (I have met the same issue when the photo is Fit to Content)

    myapp.ViewProduct.FullScreenPhoto_postRender = function (element, contentItem) {
        // Write code here.
    
        /*
        $(window).one("popupcreate", function (e) {
            $mypopup = $(e.target).popup({
                positionTo: "window",
                transition: "flow"
            });
            
        });
        */
        $(element).find("img").one('load', function (e) {             
            var container = $(element).closest("div.ui-popup-container.ui-popup-active");              
            $(container).animate({ left: ($(window).width() - $(container).width()) / 2 + $(window).scrollLeft(), top: ($(window).height() - $(container).height()) / 2 + $(window).scrollTop() }, 0);
        });        
    
        element.title = "Click to close";
    
        $(element).css({
            'cursor': 'pointer'
        });
    
        $(element).click(function () {
            contentItem.screen.closePopup("FullScreenPhoto"); //click to close        
        });            
    };

    Monday, January 12, 2015 9:11 AM