Question

我正在使用sapui5开发一个应用程序，我在简单表单中调整“dropdownbox”的大小。来自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>

Answer 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>

Sapui5 - 以简单的形式调整大小

1 个答案: