OpenUI5控制不可見

我試圖獲得unified split containers工作一個小例子，但下面的截圖說明我的問題非常好：OpenUI5控制不可見

正如你所看到的，按鈕呈現，但由於某種原因不可見。你能幫我找到原因嗎？

這是我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.view.xml）按上openui5的show code page探索

<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", {});

The Firebug err或控制檯看起來乾淨，這個錯誤似乎是獨立於瀏覽器，與IE瀏覽器我們觀察到相同的行爲。

來源

2014-11-04 niklasfi

不要直接將視圖添加到div。將其包裹在應用程序中。

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

來源

2014-11-04 10:38:33 sakthi

的問題是，默認情況下SplitContainer中使用100％的高度，但其母公司，查看，沒有定義的高度（它可以適應它的內容），所以有典型的CSS高度捷徑其中高度崩潰歸零。最重要的是，SplitContainer隱藏了任何溢出的內容，所以Button（和其他）不可見，即使它存在。

任何解決方案都需要確保視圖具有定義的高度。一個簡單的解決方案是分配一個絕對高度（例如以像素爲單位），一個更好的可以設置100％的高度，但是所有的父母高度也需要設置爲100％（或絕對值），所以CSS

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

需要使視圖工作達到100％的高度。

提示：displayBlock="true"應在100％高度情況下的視圖上設置，否則默認顯示（內嵌塊）會在基線以下增加4或5個像素，從而導致滾動條。

來源

2014-11-07 09:46:43 akudev

OpenUI5控制不可見

回答

相關問題