logo标签列表

OpenUI5控件不可见。

javascriptvisibleinvisiblesapui5
3

我正在尝试让统一分割容器的最小示例工作，但以下截图很好地描述了我的问题：

正如您所看到的，按钮已经被呈现，但由于某种原因是不可见的。您能帮我找出原因吗？
这是我的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>

这是根据 openui5 explored 上 显示代码页面 的视图（x4.view.xml）所示。
<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", {});

火狐的错误控制台看起来很干净，而且这个错误似乎与浏览器无关，因为我们在IE中观察到相同的行为。
2个回答
3
问题在于SplitContainer默认使用100%的高度，但其父级View没有定义高度（因为其适应其内容），所以会出现典型的CSS高度问题，导致高度折叠为零。此外，SplitContainer隐藏任何溢出内容，因此即使存在Button（和其他内容），它也不可见。

任何解决方案都需要确保View具有定义的高度。一个微不足道的解决方案是分配绝对高度（例如以像素为单位），更好的解决方案可能设置100%的高度，但然后所有父级高度也需要设置为100%（或者绝对值），所以CSS

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

要使视图的高度达到100％，需要执行以下操作。

提示：在这些100％高度的情况下，应在视图上设置dispalyBlock="true"，否则默认的显示方式（inline-block）会在基线下方添加4或5像素，导致出现滚动条。

2
不要直接将视图添加到div中，请在App中包装它。
<script>
        var oApp = new sap.m.App();
        var myView = sap.ui.xmlview("x4")
        oApp.addPage(myView);
        oApp.placeAt('content');
</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接