Matrix Layout, управление с высотой 100% не покрывает всю высоту ячейки

Я хочу, чтобы определить следующее расположение элементов управления:Matrix Layout, управление с высотой 100% не покрывает всю высоту ячейки

VBox----------- TextArea--- 
! TextField ! !   ! 
! TextField ! !   ! 
! TextField ! !   ! 
! TextField ! !   ! 
! TextField ! !   ! 
--------------- -----------

Слева некоторый контроль (здесь: VBox с содержанием) и на правой текстовой области, которая охватывает всю высоту. Результат: должно быть, что текстовая область имеет ту же высоту, что и VBox.

Я попытался сделать это с помощью MatrixLayout +, присвоив высоту 100% текстовой области, но не получится. 100% -определение на высоту текстовой области не интерпретируется так, как я хочу ...

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
    <title>SAPUI5 Testing</title> 
    <script id="sap-ui-bootstrap" 
     src="resources/sap-ui-core.js" 
     data-sap-ui-theme="sap_bluecrystal" 
     data-sap-ui-libs="sap.m,sap.ui.commons"> 
    </script> 
    <script> 
     // VBox for the left side, containing 10 text fields     
     var vvb = new sap.m.VBox(); 
     for (var i=0;i<5;i++) 
     { 
      var vtf = new sap.ui.commons.TextField(); 
      vtf.setValue("TextField"); 
      vtf.setWidth("100%"); 
      vvb.addItem(vtf); 
     } 

     // TextArea for the right side 
     var vta = new sap.ui.commons.TextArea(); 
     vta.setWidth("100px"); 
     vta.setHeight("100%"); // <== I want the text area to be as high as the cell 
     vta.setValue("Text Area"); 

     // Matrix + one row   
     var vma = new sap.ui.commons.layout.MatrixLayout({layoutFixed:false}); 
     vma.createRow(vvb,vta); 

     vma.placeAt("uiArea"); 
    </script> 
</head> 
<body class="sapUiBody"> 
    <div id="uiArea"></div> 
</body> 
</html>

Результат выглядит так:

VBox----------- 
! TextField ! 
! TextField ! TextArea--- 
! TextField ! !   ! 
! TextField ! ----------- 
! TextField ! 
---------------

Имеет кто-то какая-то идея, как макет элементов управления , так что текстовая область покрывает всю высоту ячейки? (... конечно, я не хочу определять высоту пикселя ...!)

Спасибо!

источник

2014-09-23 Björn

Результат выглядит высоту 100% для меня, см Http://jsbin.com/tosezumatelo/1/edit – Allen

Ooooh - Я вижу: это несовместимость между браузерами. –

Он работает в Chrome, но не работает в Firefox (32.0.2) и не работает в Internet Explorer (11). - С Safari я не могу сказать ... –

попытайтесь изменить порядок своих кодовых линий. я думаю, вы должны установить высоту после создающей строки:

vma.createRow(vvb,vta); 
vta.setHeight("100%");

кстати: вы получите исключение из createRow (...)? я думаю, что createRow (...) позволяет только один параметр: https://sapui5.netweaver.ondemand.com/sdk/docs/api/symbols/sap.ui.commons.layout.MatrixLayout.html#createRow

источник

2014-09-26 14:41:56 anion

Поведение остается неизменным после изменения последовательности. Я был бы очень удивлен, если бы последовательность была такой актуальной ... - И: да, вы можете передать список элементов управления в метод createRow. –

-1

Вот решение, которое я нашел:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
    <title>SAPUI5 Testing</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"> 
    </script> 
    <script> 
     // Matrix + one row   
     var vma = new sap.ui.commons.layout.MatrixLayout({ 
      layoutFixed:false 
     }); 
     for (var i=0; i<10; i++) { 
      if (i == 0) { 
      var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell(); 
      oCell1.addContent(new sap.ui.commons.TextField({ 
       value : "TextField", 
       width : "100%" 
      })); 

      var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell({ 
       // this is the solution for your desired layout 
       rowSpan : 10, 
       height : "100%" 
      }); 
      oCell2.addContent(new sap.ui.commons.TextArea({ 
       width : "100px", 
       height : "100%", 
       value : "Text Area" 
      })); 

      vma.createRow(oCell1, oCell2); 

      } else { 
      vma.createRow(new sap.ui.commons.TextField({ 
       value : "TextField", 
       width : "100%" 
      })); 
      } 
     } 

     vma.placeAt("uiArea"); 
    </script> 
</head> 
<body class="sapUiBody"> 
    <div id="uiArea"></div> 
</body> 
</html>

http://jsbin.com/xoyakicarora/1/edit?html,output

источник

2015-12-09 13:50:36

Matrix Layout, управление с высотой 100% не покрывает всю высоту ячейки

ответ

Смежные вопросы