Question

我正在尝试使用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>

根据openui5探索的show code page，这是视图（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", {});

Firebug错误控制台看起来很干净，这个错误似乎与浏览器无关，因为我们观察到同样的行为。

Answer 1

问题是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％的高度。

提示：应在那些100％高度的情况下在视图上设置displayBlock="true"，否则默认显示（内联块）会在基线下方添加4或5个像素，这会导致滚动条。

Answer 2

不要将视图直接添加到div。将其包装在App中。

<script>
        var oApp = new sap.m.App();
        var myView = sap.ui.xmlview("x4")
        oApp.addPage(myView);
        oApp.placeAt('content');
</script>

OpenUI5控件不可见

2 个答案: