Lightswitch HTML - 屏幕过度拉伸

Question

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

当按下 "See My Projects Only" 按钮开关时（所以我隐藏了这个并显示了另一个选项”，使用下面的代码：

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;
}

Answer 1

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

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

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

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

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

Answer 2

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

希望对您有所帮助..！

谢谢，弗朗西斯

Lightswitch HTML - 屏幕过度拉伸

Lightswitch HTML - screen over-stretches

css

visual-studio-lightswitch

lightswitch-2013