Clever Geek Handbook

OpenUI5 controls not showing

I'm trying to get a minimal example for unified markup containers to work, but the following screenshot describes my problem pretty well:

As you can see, the buttons are visible, but invisible for some reason. Can you help me find the reason?

This is my file 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>

This view ( x4.view.xml

) according to show codepage on openui5 explored

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

and this (minimal) x4.controller.js 

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

Firebug's fire error console looks clean and this error seems to be browser independent as we are seeing the same behavior in IE.

+3


source to share


2 answers


Don't add the view directly to the div. Wrap it in an app.



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


source


The problem is that the SplitContainer defaults to 100% height, but its parent View does not have a specific height (it adapts to its content), so there is a typical CSS height shortcut where the height collapses to zero. In addition, the SplitContainer hides any overflow content, so the button (and the rest) is not visible even if it exists.

Any solution should make sure that the view has a specific height. A trivial solution would be to assign an absolute height (e.g. in pixels), the better to set the height to 100%, but then all parent heights must also be set to 100% (or an absolute value), so the CSS

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


you need to make 100% height for the View to work.

Hint: displayBlock="true"

must be set in the view in those cases 100% height, otherwise the default display (inline-block) adds 4 or 5 pixels below the baseline which causes the scroll bar.

+3


source






More articles:


All Articles