Lightswitch HTML - 屏幕过度拉伸答案

【问题标题】：Lightswitch HTML - screen over-stretchesLightswitch HTML - 屏幕过度拉伸
【发布时间】：2016-07-20 09:17:35
【问题描述】：

我注意到这一点已经有一段时间了，但是当使用 Lightswitch 并将属性设置为“拉伸到容器”时，屏幕有时会显得过度拉伸并将项目向下移动到下一行，例如：

当按下“仅查看我的项目”按钮切换时（所以我隐藏这个并显示另一个选项”使用下面的代码：

if (screen.ChangeDefaultValue.count > 0) { screen.ChangeDefaultValue.selectedItem = screen.ChangeDefaultValue.data[0];

    screen.ChangeDefaultValue.selectedItem.HomepageProjectsDefault = false;

    screen.DefaultOption = null;

    myapp.applyChanges();

    setTimeout(function () {
        screen.Projects.refresh();
    }, 100);

    screen.findContentItem("SeeAllProjects").isVisible = false;
    screen.findContentItem("SeeMyProjectsOnly").isVisible = true;
}
else {

}

这很好用，但是正如您在上面的第二张图片中看到的那样，按钮向下移动到参数搜索框下方，就好像它被过度拉伸了一样。我已尝试更改 .msls-content 的边距和填充，但此错误仍然出现在此处以及我的多个其他页面上。

有人找到解决此问题的方法吗？

更多信息：

我使用的是 msls-2.5.3.css 并在 default.htm 文件中声明
我试过这个https://social.msdn.microsoft.com/Forums/vstudio/en-US/fb1305c5-ac13-474e-8ae0-df74ebf12590/html-client-custom-control-stretch-to-container-sizing-bug-problem?forum=lightswitch

问题

msls-2.5.3.css 中的这一小块代码似乎是问题所在，但是如果我将其注释掉，其他屏幕就会中断。高度中的所有填充似乎都消失了，它们在模态屏幕上都相互重叠

.msls-clear {
    clear: both;
}

【问题讨论】：

标签： css visual-studio-lightswitch lightswitch-2013

【解决方案1】：

在 LightSwitch HTML 中，我们可以使用列布局选项来呈现每一列中的控件。通过设置“拉伸到容器”属性，列只被拉伸到容器大小，而不是每列内的控件被容器拉伸。控件在容器内正确呈现。由于隐藏和显示内容项时列宽拉伸而出现问题，这与页面中使用的组件无关。请遵循以下解决方案，同时通过单击按钮动态删除内容项。请在单击按钮时删除“msls-clear”类或将 clear: none 应用于“msls-clear”类。 this.element.parents(".msls-column").next(".msls-clear").removeClass("msls-clear")

希望这会对你有所帮助..！

谢谢，弗朗西斯

【讨论】：

【解决方案2】：

我不是 CSS 专家，但这似乎解决了我的问题：

.msls-clear {
    clear: right;
    max-width: 1850px;
}

我测试过的所有机器的分辨率都是 1920 x 1080，因此通过稍微减小宽度，它永远不会过度拉伸物品。

我最初确实注释掉了在 Internet Explorer 中工作的 clear: right;，但是我在 google chrome/firefox 中测试了一些 Syncfusion 控件。我无法单击其中任何一个，因此必须添加最大宽度。

如果有人能提出更好的解决方案，我将不胜感激，但至少目前可行

【讨论】：