locked
How do I control the size of the html Add New data screen in a Lightswith Web Application? RRS feed

  • Question

  • I have a lightswitch application on Azure that is mainly used for job applications. The problem is that the html AddEdit screen is limited to a small rectangle and is not conducive to a large number of fields and child tables for "Past Experience", "Education"ect...  How can I make the screen larger to accommodate more information to input? I understand that any solution may prevent the use of the application on mobile devices.
    Sunday, August 9, 2015 5:27 PM

Answers

  • Put the following code in the _postRender() of the first tab group of the dialog and just the height and width as required:

    // set height
    $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxHeight', '500px');
    // set width
    $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxWidth', '800px');
    
    Hope this helps.


    Regards, Xander. My Blog

    • Proposed as answer by Xpert360 Monday, August 10, 2015 7:54 AM
    • Marked as answer by Angie Xu Thursday, August 20, 2015 6:19 AM
    Monday, August 10, 2015 3:48 AM
  • You could use jQuery/etc to find out what the current screen width and height is and then calculate a suitable value to insert into the above code:

    If you are using jQuery, you can get the size of the window or the document using jQuery methods:

    $(window).height();   // returns height of browser viewport
    $(document).height(); // returns height of HTML document
    $(window).width();   // returns width of browser viewport
    $(document).width(); // returns width of HTML document

    For screen size you can use the screen object in the following way:

    screen.height;
    screen.width;

    See Get the size of the screen, current web page and browser window


    Regards, Xander. My Blog

    • Marked as answer by Angie Xu Thursday, August 20, 2015 6:19 AM
    Monday, August 17, 2015 9:27 PM

All replies

  • Put the following code in the _postRender() of the first tab group of the dialog and just the height and width as required:

    // set height
    $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxHeight', '500px');
    // set width
    $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxWidth', '800px');
    
    Hope this helps.


    Regards, Xander. My Blog

    • Proposed as answer by Xpert360 Monday, August 10, 2015 7:54 AM
    • Marked as answer by Angie Xu Thursday, August 20, 2015 6:19 AM
    Monday, August 10, 2015 3:48 AM
  • Perfect.  Thank you.
    Monday, August 10, 2015 12:53 PM
  • While, as I said, this a perfect solution, I am wondering if there is a way to make it fit to the window size or page size rather than a fixed "maxHieght ,'500px'" ofr a fixed "'maxWidth', '800px'"?  
    Wednesday, August 12, 2015 1:25 PM
  • Have you tried changing the screen Appearance Property of your add/edit screen by unchecking the Show As Dialog box?

    Just a thought,

    R. T. Watkins

    Monday, August 17, 2015 7:44 PM
  • You could use jQuery/etc to find out what the current screen width and height is and then calculate a suitable value to insert into the above code:

    If you are using jQuery, you can get the size of the window or the document using jQuery methods:

    $(window).height();   // returns height of browser viewport
    $(document).height(); // returns height of HTML document
    $(window).width();   // returns width of browser viewport
    $(document).width(); // returns width of HTML document

    For screen size you can use the screen object in the following way:

    screen.height;
    screen.width;

    See Get the size of the screen, current web page and browser window


    Regards, Xander. My Blog

    • Marked as answer by Angie Xu Thursday, August 20, 2015 6:19 AM
    Monday, August 17, 2015 9:27 PM