Блог

Пытаюсь увеличить ширину ввода внутри контейнера FlexBox. Я бы хотел, чтобы она была той же ширины, что и родительский контейнер. Это мой view.xml:

 <mvc:View xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
    <l:VerticalLayout id="idVL" class="sapUiContentPadding" width="100%">
        <l:content>
            <Panel id="idPnl">
                <FlexBox id="idFB">
                    <Input id="idInput">...</Input>
                </FlexBox>
            </Panel>
        </l:content>
    </l:VerticalLayout>
</mvc:View>
  

Проверка страницы в браузере показывает, что родительский гибкий блок фактически расширяется до ширины, установленной в VerticalLayout. Однако SAPUI5 автоматически создает дополнительный раздел, который не распространяется на всю ширину, и помещает ввод внутрь этого:

 <div id="xxxxx---view--idFB" data-sap-ui="..." class="..."> //This is the parent FlexBox, it extends to the size of VerticalLayout element.
    <div id="__data4" style="order:0;flex-grow:0;flex-shrink:1;..." class="..."> //This sub-FlexBox is created automatically, and is smaller than it's parent.
        <div id="xxxxx---view--idInput ...> //The input is placed here.
            ...
        </div>
    </div>
</div>
  

Я могу ошибаться, но я подозреваю, что виноват «flex-grow: 0», и я не могу найти способ получить доступ к этому свойству. Я попытался установить его в css внутри #idFB, но это не сработало. Также пытался установить его внутри некоторых из тех классов, которые используются подразделением (например, «.sapMFlexItem»), также не сработало. Попытался установить ширину каждого контейнера на 100%, также не работает. В документации ничего не упоминается о ручной настройке свойств flex.

Как я могу установить flex-grow равным 1 или каким-либо другим методом расширить ввод до той же ширины, что и VerticalLayout?

Примечание: я не уверен на 100% в использовании FlexBox здесь; Я просто не знаю ни одного другого контейнера, который я мог бы использовать для размещения ввода и кнопки внутри и программной вставки большего количества на странице, т. Е.:

controller.js:

 addInput: function () {
    var oInput = this.byId("idInput").clone();

    var delButton = new sap.m.Button({
        icon: "sap-icon://delete",
        press: this.deleteInput
    });

    var _oLayout = new sap.m.FlexBox({  // Some other better container?
        items: [oInput, delButton]
    });
    this.byId("idPnl").addContent(_oLayout);
}
  

Понял это. Необходимо поместить следующее внутри ввода:

 <Input>
    ...
    <layoutData>
        <FlexItemData growFactor="1"/>
    </layoutData>
</Input>