当其高度设置为“拉伸到容器”时，LightSwitch HTML根屏幕布局延伸到屏幕之外。 [英] LightSwitch HTML root screen layout extending beyond the screen when its height is set to "stretch to container"

问题描述

如果我有一个屏幕，并且我将根布局的高度设置为拉伸到容器并确保在页脚中没有可见的按钮（

因此，页脚已折叠），您会注意到页面布局将不必要地延伸超出浏览器窗口的高度（导致滚动条出现），并且它将完全扩展到标题（因此，如果标题为60px，底部的额外空间将为60px）。这看起来不专业，页脚按钮出现和消失，浏览器滚动条也是如此，浏览器滚动条在大多数浏览器中都会向内和向外伸展页面内容，以占据其宽度，导致页面内容不舒服。

下面是一个截图来说明：

有没有人知道这方面的补救措施？解决此问题的一种方法是修改Microsoft LightSwitch库的_createScreenFrameHeader函数中$ header的声明。此声明需要从以下内容中更改：

  var $ header = $（< div class ='msls-header 'data-role-'header'data-update-page-padding ='false'data-tap-toggle ='false'>< / div>）
  pre> 
 
 
以下内容（在声明的末尾添加data-position ='fixed'属性）：
 
 
  var $ header = $（< div class ='msls-header'data-role ='header'data-update-page-padding ='false'data-tap -toggle ='false'data-position ='fixed'>< / div>）
  
 
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? 
解决方案
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>")


                        
这篇关于当其高度设置为“拉伸到容器”时，LightSwitch HTML根屏幕布局延伸到屏幕之外。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！