2014-11-04 8 views
3

내가 작업하는 unified split containers에 대한 최소한의 예를 얻기 위해 노력하고 있지만, 다음과 같은 화면이 꽤 잘 내 문제를 설명합니다, 당신이 볼 수 있듯이OpenUI5 컨트롤 보이지

가, 버튼이 렌더링되지만 어떤 이유로 보이지 않습니다. 이유를 찾도록 도와 주시겠습니까?

이 내 index.html 파일입니다 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.view.xml)입니다

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

방화범 오류 또는 콘솔 보이는 깨끗한, 그리고이 오류는 브라우저 독립적 인 것으로 IE에서 우리는 같은 동작을 관찰했다.

답변

2

div에 직접보기를 추가하지 마십시오. 응용 프로그램 내에서 랩핑하십시오.

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

문제 기본적으로 SplitContainer가 100 % 높이를 사용하지만, 부모,보기, 아니 정의 된 높이 (그것의 내용에 적응)이 없기 때문에 높이가 붕괴 전형적인 CSS 높이 바로이 점이다 0으로. 그 위에는 SplitContainer가 넘쳐 흐르는 내용을 숨기므로 버튼 (및 나머지)은 보이더라도 보이지 않습니다.

모든 솔루션보기에는 정의 된 높이가 있어야합니다. 사소한 해결책은 절대 높이 (예 : 픽셀)를 지정하는 것이고 더 좋은 것은 높이를 100 %로 설정할 수 있지만 모든 부모 높이도 100 % (또는 절대 값)로 설정해야하므로 CSS

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

은보기 작업을 위해 100 % 높이가 필요합니다.

힌트 : 100 % 높이의 경우보기에 displayBlock="true"을 설정해야합니다. 그렇지 않으면 기본 디스플레이 (인라인 블록)가 스크롤 막대를 발생시키는 기준선 아래에 4 또는 5 픽셀을 추가합니다.