none
HTML Client - Buil-in feature(s) to center a popup - with form-factor and rotation awareness RRS feed

  • Question

  • Hi,

    Currently, popup created in html client are positioned at the bottom of my screen. I'd like to center them independently of screen size, while having rotation awareness.

    Is there any built-in feature in lighswitch to quickly and easily do that ?

    Friday, May 31, 2013 7:22 PM

Answers

  • Hi,

    I guess you're using jQuery 1.3.0 then :) The popup widget was changed with that release so the event to use should be popupcreate.

    myapp.BrowseCustomers.ShowGroup_execute = function (screen) {
        $(window).one("popupcreate", function (e) {
            $(e.target).popup({
                positionTo: "window"
            });
        });
        screen.showPopup("Group");
    };

    Best regards,
    Huy
    • Marked as answer by carloregis Wednesday, June 5, 2013 5:24 PM
    Wednesday, June 5, 2013 5:07 PM

All replies

  • Hi,

    There is no built-in feature to center screen's popup on the window. However you can write custom code to do so. For example:

    myapp.BrowseCustomers.ShowGroup_execute = function (screen) {
        $(window).one("popupbeforeposition", function (e) {
            $(e.target).popup({
                positionTo: "window"
            });
        });
        screen.showPopup("Group");
    };

    Replace Group with your popup name.

    What we're doing here is add an event handler to be fired once before a popup is shown. In that handler we call jQuery Mobile to override the popup positionTo option - using "window" instead of "origin". Then we invoke showPopup to show the popup we want.

    The code above works with jQuery Mobile 1.2. For jQuery Mobile 1.3, replace popupbeforeposition with popupcreate event.

    Best regards,
    Huy


    Wednesday, June 5, 2013 12:55 AM
  • Thank you so much Huy,

    However, my popup is not centered unless I do a manual windows resize or minimize/maximize. Do you know of a hack to automatically achieve this ?


    • Edited by carloregis Wednesday, June 5, 2013 4:44 PM
    Wednesday, June 5, 2013 4:43 PM
  • Hi,

    I guess you're using jQuery 1.3.0 then :) The popup widget was changed with that release so the event to use should be popupcreate.

    myapp.BrowseCustomers.ShowGroup_execute = function (screen) {
        $(window).one("popupcreate", function (e) {
            $(e.target).popup({
                positionTo: "window"
            });
        });
        screen.showPopup("Group");
    };

    Best regards,
    Huy
    • Marked as answer by carloregis Wednesday, June 5, 2013 5:24 PM
    Wednesday, June 5, 2013 5:07 PM
  • Wow ! What a knowledge ! Working like a charm.

    You really have to write a book on LS 2012 and jQuery.

    Thanks very much.


    • Edited by carloregis Wednesday, June 5, 2013 5:26 PM
    Wednesday, June 5, 2013 5:26 PM
  • Hi Huy,

    Thanks for this. But this only centers the popup once (as you noted).

    When using a popup to filter data, and a text search is used, as per Beth's example here: http://blogs.msdn.com/b/bethmassi/archive/2013/05/23/top-10-quick-tips-for-building-great-mobile-lightswitch-apps.aspx

    You will notice, using your method above in combination with her example, that after changing a text filter, for example in Beth's example, enter a candidate name, tab away from the control or similar to get the filter to apply, and the popup position moves. to the original Origin setting.

    Also, when the user changes viewport orientation, from portrait to landscape, and back and forth again, initially the popup stays centered, but subsequently then changes. Try this with 640x360 to 360x640 to 640x360 to 360x640, etc for example.

    Any advice on how to KEEP the popup centered, both when the screen refreshes data and when viewport orientation is swapped around?

    Thanks in advance.

    Tuesday, October 7, 2014 7:10 AM
    • Proposed as answer by joshbooker Tuesday, October 7, 2014 10:53 PM
    Tuesday, October 7, 2014 10:53 PM
  • Thanks Josh. *thumbs up* Will try that out. Hoping it also deals with the onscreen keyboard issue as well.

    Thanks for being a valuable contributor on the forums!

    Wednesday, October 8, 2014 6:19 AM
  • Thanks again Josh, played around with it, and it works great for resizing the window and changing formfactor orientation, but not when scrolling, which creates a little havoc in smaller form factors. (unless there is something I missed?). 

    So I thought of doing a little hack like:

    $(window).scroll(function (e) {
        $(window).resize();
    });

    Which works "sort of", but then I'd have to clean up the window events every time and that gets a little nasty. So...

    I've taken a stance to simply not use popups in Lightswitch HTML for the foreseeable future, and for complex filters, to rather thread in modal dialog screens that return parameters back via promises. Yep, I know promises are not upheld with browser's refresh and navigating forward-save-back, only with promise-save-back, but hey, what's a guy to do :)

    What's nice about using screens is that they are globally reusable, pattern friendly-ish, and do the whole "full screen in small form factor shhtuufff" thing.

    But cheers for the help anyway bud. Keep on rocking.

    Monday, October 20, 2014 5:51 AM