Sapui5 - Регулировка размера в простой форме

Я разрабатываю приложение с использованием sapui5, и у меня возникла проблема с размером «раскрывающегося списка» в простой форме. Элементы из пакета sap.m автоматически подстраиваются под размер содержимого простой формы, в то время как другие элементы из таких пакетов, как sa.ui.commons, также не подстраиваются.

Как настроить размер раскрывающегося списка? Я попытался установить ширину и высоту на «100%», но это не сработало.

Добавление кода:

<c:FragmentDefinition
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:l="sap.ui.layout"
        xmlns:f="sap.ui.layout.form"
        xmlns:c="sap.ui.core"
        xmlns:co="sap.ui.commons"
        xmlns:col="sap.ui.commons.layout"
        xmlns="sap.m">
            <l:Grid
            defaultSpan="L12 M12 S12"
            width="auto">
            <l:content>
                <f:SimpleForm

                    minWidth="800"
                    maxContainerCols="2"
                    editable="true"
                    layout="ResponsiveGridLayout"
                    title="General Info"
                    labelSpanL="3"
                    labelSpanM="3"
                    emptySpanL="4"
                    emptySpanM="4"
                    columnsL="2"
                    columnsM="2"
                    class="editableForm">
                    <f:content>
                        <Label text="Employee Name" />
                        <co:DropdownBox   width="200px" >
                            <c:ListItem text="Emp1"/>
                            <c:ListItem text="Emp2"/>
                        </co:DropdownBox> 
                        <Label text="Type of Travel" />
                        <Select >
                            <c:ListItem key="B" text="Business"/>
                            <c:ListItem key="O" text="Other"/>
                        </Select>

                    </f:content>
                </f:SimpleForm>
            </l:content>
        </l:Grid>
    </c:FragmentDefinition>

person ducks13    schedule 29.03.2015    source источник
comment
Голосование за закрытие этого вопроса, поскольку sap.ui.commons устарело и несовместимо с sap.m, с которым согласился автор. Этот вопрос вряд ли поможет будущим читателям.   -  person Boghyon Hoffmann    schedule 05.09.2020


Ответы (1)


Как насчет того, чтобы просто опустить ширину элемента управления commons, как вы сделали с элементом управления m? Это масштабирует sap.ui.commons.DropdownBox так же широко, как элемент управления sap.m.Select.

Кстати, я бы не стал смешивать элементы управления m с элементами управления common; вы можете столкнуться с проблемами CSS


РЕДАКТИРОВАТЬ: см. этот рабочий пример, sap.ui.commons.DropdownBox и sap.m.Select имеют одинаковый размер:

sap.ui.controller("view1.initial", {
  onInit : function() { }
});

var app = new sap.m.App({});

var oView = sap.ui.xmlview({
  viewContent: jQuery("#view1").html()
});

app.addPage(oView);
app.placeAt("uiArea");
<!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 template</title>

    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-libs="sap.m"></script>

    <script id="view1" type="ui5/xmlview">
        <mvc:View 
          controllerName="view1.initial"
          xmlns:mvc="sap.ui.core.mvc"
          xmlns:l="sap.ui.layout"
          xmlns:f="sap.ui.layout.form"
          xmlns:c="sap.ui.core"
          xmlns:co="sap.ui.commons"
          xmlns:col="sap.ui.commons.layout"
          xmlns="sap.m">
            <l:Grid
            defaultSpan="L12 M12 S12"
            width="auto">
                <l:content>
                    <f:SimpleForm

                        minWidth="800"
                        maxContainerCols="2"
                        editable="true"
                        layout="ResponsiveGridLayout"
                        title="General Info"
                        labelSpanL="3"
                        labelSpanM="3"
                        emptySpanL="4"
                        emptySpanM="4"
                        columnsL="2"
                        columnsM="2"
                        class="editableForm">
                        <f:content>
                            <Label text="Employee Name" />
                            <co:DropdownBox>
                                <c:ListItem text="Emp1"/>
                                <c:ListItem text="Emp2"/>
                            </co:DropdownBox> 
                            <Label text="Type of Travel" />
                            <Select>
                                <c:ListItem key="B" text="Business"/>
                                <c:ListItem key="O" text="Other"/>
                            </Select>

                        </f:content>
                    </f:SimpleForm>
                </l:content>
            </l:Grid>
        </mvc:View>
    </script>

</head>

<body class="sapUiBody" role="application">
    <div id="uiArea"></div>
</body>
</html>

person Qualiture    schedule 31.03.2015
comment
не работает, размер становится еще меньше. Это не будет масштабировать его так же, как элемент управления. Это проблема, с которой я столкнулся. - person ducks13; 31.03.2015
comment
Не уверен, что пойдет не так, см. мой обновленный ответ, используя ваш код - person Qualiture; 31.03.2015
comment
Высота все еще другая, и когда я использую ее в своем приложении, ее ширина не одинакова :( - person ducks13; 31.03.2015
comment
Ну да, конечно, высота другая, это совершенно другой элемент управления, чего вы тогда ожидали :-) Вы можете изменить CSS, чтобы изменить высоту. Тем не менее, ширина должна адаптироваться очень хорошо, вы, должно быть, где-то допустили ошибку кодирования/css-width. Но опять же, я бы не стал смешивать общие ресурсы и элементы управления. - person Qualiture; 31.03.2015
comment
да, вы абсолютно правы. Я не должен смешивать эти библиотеки. Я буду придерживаться одного и посмотреть, как он выглядит. Спасибо! - person ducks13; 31.03.2015
comment
@ducks13 Как указано в документации, эти две библиотеки не следует использовать вместе. Поскольку это уже то, что предложила Qualiture, я бы рекомендовал принять его ответ, а также сообщить другим, что проблема решена этим. - person Boghyon Hoffmann; 06.04.2018