我有一个多功能组合盒,里面有元素。目前,组合框和项目的宽度不相等:
我想让两个元素的宽度相同,如下所示:
我已经尝试过了
<MultiComboBox width="auto">
<items>
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>
还有这个
<MultiComboBox width="100%">
<items>
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>
还有这个
<MultiComboBox>
<items width="100%">
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>
但是,没有任何效果。有人能给我建议吗?
最佳答案
其实你可以做到这一点。这就是窍门:MultiComboBox 有一个隐藏的聚合picker,您可以通过函数getPicker 获取它。它返回一个 sap.m.Popover 实例,该实例又具有 2 个属性(contentWidth 和 contentMinWidth),甚至还有 beforeOpen。技巧是在 beforeOpen 事件中设置 contentWidth 或 contentMinWidth。
查看代码:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="UI5 table example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>UI5 Table Example</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.core'></script>
<script>
var oModel = new sap.ui.model.json.JSONModel([
{ key: "0", text: "First item text"},
{ key: "1", text: "Second item text"},
{ key: "2", text: "Third item text"},
{ key: "3", text: "Fourth item text"},
{ key: "4", text: "Fifth item text"},
{ key: "5", text: "Sixth item text"},
{ key: "6", text: "Seventh item text"},
]);
var oSelect = new sap.m.MultiComboBox("testSelect", {
width: "15rem",
items: {
path: 'items>/',
templateShareable: false,
template: new sap.ui.core.Item({ key: '{items>key}', text: '{items>text}'})
}
});
oSelect.setModel(oModel, "items");
// The trick - setting of contentWidth or contentMinWidth of Combobox Dropdown list
var oPicker = oSelect.getPicker();
if (oPicker) {
oPicker.attachBeforeOpen(function() {
// oPicker.setContentWidth(oSelect.getWidth()); // Item texts can be cut
oPicker.setContentMinWidth(oSelect.getWidth());
});
} else {
console.error("Picker is empty");
}
oSelect.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
关于javascript - 使多组合框和项目的尺寸相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45543088/