SAPUI5 заполнить весь MatrixLayoutCell кнопкой

Question

Я хочу заполнить весь 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, или мне нужно изменить макет на сетку?

Спасибо за любые подсказки!

Answer 1

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 в том же приложении.

Answer 2

Вы можете установить свойство width кнопки на 100%, чтобы соответствовать контейнеру. Если вы установили padding="None" в ячейку, в конце ячейки не будет места.

Пример:

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

JSFiddle (с видом на XML, но свойства такие же, вам нужно позвонить setPadding() и setWidth() соответственно

Что касается высоты кнопки:. В настоящее время это Невозможно растянуть высоту кнопки в MatrixLayout. Кроме того, я не рекомендую менять высоту кнопки - она ​​имеет стандартную чувствительную высоту.