Menu
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.
210
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 (e.g. 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.
97
answered Feb 23 '26 06:02
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
