制作多联箱和物品的尺寸相同

我有一个多联箱，里面有物品。目前，组合框和物品的宽度不相等：制作多联箱和物品的尺寸相同

current version

我想使这两个元素的宽度相同，这样的：

this

我曾试图

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

但是，没有什么工作。任何人都可以给我一些建议

来源

2017-08-07 Bella Andrew

我想这就是用的建议取决于建议的内容标准的行为，但没有对与输入字段。为什么它对你至关重要？ –

是客户的要求。但正如你所说，宽度应该等于内容更有意义。谢谢。 –

无法在1.44.13上复制。你能告诉我你的UI5版本和更多的页面布局吗？ –

其实你可以做到这一点。这就是诀窍：MultiComboBox有一个隐藏的聚合选取器，您可以通过函数getPicker获取。它返回一个sap.m.Popover实例，该实例又具有2个属性（contentWidth和contentMinWidth），甚至在打开之前。诀窍是在beforeOpen事件中设置contentWidth或contentMinWidth。

见代码：

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta name="description" content="UI5 table example with local JSON model" /> 
 
\t <meta http-equiv='X-UA-Compatible' content='IE=edge' /> 
 
\t <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> 
 
\t 
 
\t <title>UI5 Table Example</title> 
 
\t 
 
\t <!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries --> 
 
\t <script id='sap-ui-bootstrap' type='text/javascript' 
 
\t \t src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t data-sap-ui-theme='sap_bluecrystal' 
 
\t \t data-sap-ui-libs='sap.m,sap.ui.core'></script> 
 

 
\t \t <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"); 
 
\t \t </script> 
 
\t </head> 
 
\t <body class="sapUiBody" id="content"> 
 
\t </body> 
 
</html>

来源

2017-08-12 19:05:06 slkorolev

制作多联箱和物品的尺寸相同

回答

相关问题