How do I change the screen size in a Lightswitch html project

I have created a "Common Screen Set" in VS Lightswitch 2015 html project. I also added a button to the Browse screen to launch the AddEdit in the Common Set. As each record has about 30 fields to add, I customized the AddEdit screen to have three columns. However, only the Left hand column and the fields that are in it show up. How do make the AddEdit screen larger than the default screen size so that all three columns appear? How do I display the middle and right hand columns?

Solution

The dialog size can be changed on a screen by screen basis by overriding the screen's maxWidth and maxHeight css properties in the created method of the screen e.g.:

myapp.AddEditItem.created = function (screen) {
    $(window).one("pagebeforeshow", function (e, data) {
        var $dialog = $("div[class~='msls-dialog-frame']");
        $dialog.css({ 
            maxHeight: "900px",
            maxWidth: "1000px"
        });
    });
};

The above example changes the height from the standard 700px to 900px and the width from the standard 510px to 1000px.

The jQuery mobile pagebeforeshow event handler is needed to ensure that your dialog screen has been created and initialised (this applies as the LightSwitch HTML Client uses the jQuery mobile framework for its user interface).