gpt4 book ai didi

javascript - OpenUI5 控件不可见

转载 作者:塔克拉玛干 更新时间:2023-11-02 23:04:43 24 4
gpt4 key购买 nike

我正在尝试为 unified split containers 获取一个最小示例可以工作,但以下屏幕截图很好地描述了我的问题:

如您所见,按钮已呈现,但由于某种原因不可见。你能帮我找出原因吗?

这是我的 index.html 文件:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>App 0001</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.core, sap.ui.table"
data-sap-ui-resourceroots='{ "x4": "/example4/x4" }' >
</script>
<script>
//var myView = sap.ui.jsview("x4")
var myView = sap.ui.xmlview("x4")
myView.placeAt('content');
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>

这是根据 show code page 的 View (x4.view.xml)在openui5上探索

<mvc:View
controllerName="x4"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="fullHeight">
<u:SplitContainer
id="mySplitContainer"
showSecondaryContent="true">
<u:secondaryContent>
<Text text="Hello World!" />
</u:secondaryContent>
<u:content>
<Button text="Toggle Secondary Content" />
<Button text="Switch SplitContainer Orientation" />
</u:content>
</u:SplitContainer>
</mvc:View>

这是(最小的)x4.controller.js

sap.ui.controller("x4", {});

Firebug 错误控制台看起来很干净,而且这个错误似乎与浏览器无关,因为在 IE 中我们观察到相同的行为。

最佳答案

问题是 SplitContainer 默认使用 100% 高度,但其父 View 没有定义的高度(它会适应其内容),因此存在典型的 CSS 高度快捷方式,高度会折叠为零。最重要的是,SplitContainer 隐藏了所有溢出的内容,因此 Button(和其余部分)不可见,即使它存在。

任何解决方案都需要确保 View 具有定义的高度。一个简单的解决方案是分配一个绝对高度(例如以像素为单位),更好的解决方案可能设置 100% 高度,但是所有父级高度也需要设置为 100%(或绝对值),因此 CSS

html, body, #content {
height: 100%;
margin: 0; // body has usually a margin in browsers
}

需要为 View 工作制作 100% 高度。

提示:displayBlock="true" 应该在那些 100% 高度的情况下在 View 上设置,否则默认显示(内联 block )会在基线下方添加 4 或 5 个像素,这会导致滚动条。

关于javascript - OpenUI5 控件不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26732823/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com