OpenUI5 controls not visible
Question
I am trying to get a minimal example for unified split containers to work, but the following screenshot describes my problem pretty well:
As you can see, the buttons are rendered, but invisible for some reason. Could you help me find the reason?
This is my index.html file:
<!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 is the view ( x4.view.xml ) as per the show code page 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 the (minimal) x4.controller.js
sap.ui.controller("x4", {});
The Firebug error console looks clean, and this error seems to be browser-independent, as with IE we observe the same behaviour.
2 answers
solution1
3 2014-11-07 09:46:43
The issue is that the SplitContainer by default uses 100% height, but its parent, the View, has no defined height (it adapts to its content), so there's the typical CSS height shortcut where the height collapses to zero. On top of that, the SplitContainer hides any overflowing content, so the Button (and the rest) is not visible, even though it exists.
Any solution needs to make sure the View has a defined height. A trivial solution would be to assign an absolute height (eg in pixels), a better one may set 100% height, but then all parent heights also need to 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
}
is required to make 100% height for the View work.
Hint: displayBlock="true" should be set on the View in those 100% height cases, otherwise the default display (inline-block) adds 4 or 5 pixels below the baseline which cause a scrollbar.
solution2
2 ACCPTED 2014-11-04 10:38:33
Don't add the view directly to the div. Wrap it within an App .
<script>
var oApp = new sap.m.App();
var myView = sap.ui.xmlview("x4")
oApp.addPage(myView);
oApp.placeAt('content');
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.