Fatal编程技术网

Javascript OpenUI5控件不可见

javascript sapui5

Javascript OpenUI5控件不可见,javascript,visible,invisible,sapui5,Javascript,Visible,Invisible,Sapui5,我正在尝试获得一个最简单的示例，但下面的屏幕截图非常好地描述了我的问题： 如您所见，按钮被渲染，但由于某些原因不可见。你能帮我找到原因吗 这是我的index.html文件： <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8"> <title>App

我正在尝试获得一个最简单的示例，但下面的屏幕截图非常好地描述了我的问题：

如您所见，按钮被渲染，但由于某些原因不可见。你能帮我找到原因吗

这是我的
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>
这是（最小的）
x4.controller.js

sap.ui.controller("x4", {});
Firebug错误控制台看起来很干净，而且此错误似乎与浏览器无关，正如IE一样，我们观察到了相同的行为。

不要将视图直接添加到div。将其包装在应用程序中

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


var oApp=new sap.m.App（）；
var myView=sap.ui.xmlview（“x4”）
oApp.addPage（myView）；
oApp.placeAt（“内容”）；
问题在于SplitContainer默认使用100%高度，但其父级视图没有定义的高度（它根据其内容进行调整），因此有一个典型的CSS高度快捷方式，其中高度折叠为零。最重要的是，SplitContainer隐藏了任何溢出的内容，因此按钮（以及其他部分）不可见，即使它存在

任何解决方案都需要确保视图具有定义的高度。一个简单的解决方案是指定一个绝对高度（例如，以像素为单位），一个更好的可以设置100%高度，但是所有父高度也需要设置为100%（或绝对值），因此CSS

html, body, #content {
  height: 100%;
  margin: 0; // body has usually a margin in browsers
}
视图工作需要100%的高度

提示：
displayBlock=“true”
应该在100%高度的情况下在视图上设置，否则默认显示（内联块）会在基线下添加4或5个像素，从而导致滚动条

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