SAPUI5使用按鈕填充整個MatrixLayoutCell

我想用一個按鈕填充整個MatrixLayoutCell，以便它完全覆蓋單元格。 SAPUI5使用按鈕填充整個MatrixLayoutCell

按鈕高度隨CSS類增加，但佈局將其切斷。深藍色部分是按鈕所在的單元格。所以這個細胞接受了這個高度。

我的CSS代碼：

.myProductButton .sapMBtnInner{ 

     background-color: #0080ff !important; 

     border-color: #0000a0!important; 

     background-image: none !important; 

     text-shadow: none !important; 

     font-weight: bold !important; 

     height: 200px!important; 

}

從我的視圖中的代碼片段：

 var row1 = new sap.ui.commons.layout.MatrixLayoutRow("row_1"); 
var cell1 = new sap.ui.commons.layout.MatrixLayoutCell("cell_1"); 
cell1.addContent(prod1); 
cell1.setBackgroundDesign('Fill1'); 

row1.addCell(cell1); 
row1.setHeight('200px'); 

matrix_cell1.addRow(row1); 

prod_cell1.addContent(matrix_cell1);

我試過幾件事情，但沒有奏效。有人知道如何在MatrixLayout中解決這個問題，還是需要將佈局更改爲Grid？

感謝您的任何提示！

來源

2016-03-16 Dyrdek

As @ nistv4n說你可以設置按鈕的寬度爲100％，並刪除單元格填充padding:"None"。

要調整，你可以添加一個樣式類的按鈕（如你可能已經完成）的高度：

prod1.addStyleClass("myProductButton");

，並用一隻手完全CSS的擴大的高度和垂直對齊文本：

.myProductButton{ 
    height:200px; 
    padding:0; 
} 
.myProductButton .sapMBtnInner{ 
    height:100%; 
    display:flex; 
    align-items:center; 
} 
.myProductButton .sapMBtnInner .sapMBtnContent{ 
    width:100% 
}

jsbin上的示例。

但是請注意，不建議這樣做，not officially supported在同一個應用程序中使用sap.m和sap.ui.commons。

來源

2016-03-17 11:54:46 schnoedel

您可以將按鈕的width屬性設置爲100％以適合容器。如果您將padding="None"設置爲單元格，則單元格末尾不會顯示空格。

例子：

<layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None"> 
    <Button text="Test Button" width="100%"/> 
</layout:MatrixLayoutCell>

JSFiddle（與XML的看法，但性質是一樣的，你需要調用setPadding()和setWidth()相應

關於按鈕的高度。目前它的無法在MatrixLayout中擴展按鈕的高度，此外，我不建議更改按鈕的高度 - 它具有標準化的響應高度。

來源

2016-03-16 20:26:39 nistv4n

SAPUI5使用按鈕填充整個MatrixLayoutCell

回答

相關問題