Как мне изменить ширину с отзывчивой кнопки в UI5? - PullRequest
Новая
       8

Как мне изменить ширину с отзывчивой кнопки в UI5?

0 голосов
/ 16 октября 2019

Я новичок в UI5 и хочу создать две отзывчивые кнопки. Ширина должна составлять 50% от просмотра на кнопку. Проблема в том, что я не совсем понимаю, как установить ширину для отзывчивой кнопки. 

    var oButtonNeuePal = new sap.m.Button({
        icon : "sap-icon://add-document",
        text : "{i18n>lieferschein.btnNeuePal}",
        press : [ 'NEUEPAL', oController.onButton, oController ]
    });
    var oButtonProtokoll = new sap.m.Button({
        icon : "sap-icon://list",
        text : "{i18n>lieferschein.btnProtokoll}",
        press : [ 'PROTOKOLL', oController.onButton, oController ]
    });


    /***********************************************************************
     * Page
     */     

    var oForm = new sap.ui.layout.form.SimpleForm({
        layout : sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout
    });

    var oGroupH = new sap.m.HBox({
        justifyContent : sap.m.FlexJustifyContent.SpaceBetween,
    });
    oGroupH.addItem(oButtonNeuePal);
    oGroupH.addItem(oButtonProtokoll);

    var oGroupV = new sap.m.VBox();
    oGroupV.addItem(oGroupH);
    //I removed some labels and Inputfield

    oForm.addContent(oGroupV);

    var oPage = new sap.m.Page({
        customHeader : oBar
    });
    oPage.addContent(oForm);

1 Ответ

0 голосов
/ 16 октября 2019

Это может быть интересно для вас: Flex Box - Регулировка размера

При заполнении HBox / FlexBox содержимым не каждый элемент управления (возможно, даже элемент управления) не будетавтоматически занимает все доступное пространство.

Вы должны присвоить кнопке width 100% и установить growFactor ее макета равным 1.

В XML (из моего примерассылка): 

<Button text="{i18n>lieferschein.btnNeuePal}" width="100%">
    <layoutData>
        <FlexItemData growFactor="1" />
    </layoutData>
</Button>

В JS (вероятно): 

var oButtonNeuePal = new sap.m.Button({
    icon : "sap-icon://add-document",
    text : "{i18n>lieferschein.btnNeuePal}",
    layoutData: new sap.m.FlexItemData({ growFactor: 1}),
    width: "100%",
    press : [ 'NEUEPAL', oController.onButton, oController ]
});
...