LightSwitch HTML root screen layout extending beyond the screen when its height is set to "stretch to container"

Question

Dears,

If I have a screen and I set the root layout's height to "Stretch to Container" and make sure that no buttons are visible in the footer (So the footer is collapsed), you will notice that the page layout will extend unnecessarily beyond the height of the browser window (causing the scrollbar to appear), and it will extend exactly as much as the header (So if the header is 60px, the extra space at the bottom will be 60px). This looks unprofessional and as footer buttons appear and disappear so does the browser scrollbar, which in most browsers will stretch the page contents inwards and outwards to occupy the extent of its width causing uncomfortable jerky movement to the page contents.

Below is a screenshot to illustrate:

Does anyone know a remedy to this?

Answer 1

One approach to resolve this issue, is to revise the declaration of $header in the Microsoft LightSwitch library's _createScreenFrameHeader function. This declaration needs to be changed from the following:

var $header = $("<div class='msls-header' data-role='header' data-update-page-padding='false' data-tap-toggle='false' ></div>")

To the following (adding the data-position='fixed' attribute to the end of the declaration):

var $header = $("<div class='msls-header' data-role='header' data-update-page-padding='false' data-tap-toggle='false' data-position='fixed' ></div>")