CODEWITHSUNDEEP
javascriptsapui5
Bella Andrew
Bella Andrew

Reputation: 13

Make size of multicombo box and items same

I have a multicombo box with items inside it. Currently, width of combo box and items is not equal:

current version

I want to make width of both elements same, like this:

this

I had tried 

<MultiComboBox width="auto">
<items>
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>

also this

<MultiComboBox width="100%">
<items>
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>

and this

<MultiComboBox>
<items width="100%">
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>

However, nothing is working. Can anyone suggest me something?

Upvotes: 0

Views: 2284

Answers (1)

slkorolev
slkorolev

Reputation: 6001

Actually you can do this. That's the trick: MultiComboBox has a hidden aggregation picker, which you can obtain by function getPicker. It returns a sap.m.Popover instance which in turn has 2 properties (contentWidth and contentMinWidth) and even beforeOpen. The trick is to set contentWidth or contentMinWidth in the beforeOpen event.

See code:

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

Upvotes: 2

Related Questions