以简单的形式调整尺寸

Question

我正在使用 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>

Answer 1

直接省略

commons

控件的宽度怎么样，就像您对

控件所做的那样？这会将

sap.ui.commons.DropdownBox

缩放为与

sap.m.Select

控件一样宽。

顺便说一句，我不会将

控件与

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>

以简单的形式调整尺寸

问题描述投票：0回答：1

1个回答

最新问题

以简单的形式调整尺寸

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1