Value Help Dialog Header's Description & Item's Value Misaligned

[former_member303153]

Hello,

I'm trying to implement Value Help Dialog.

When I'm trying to run it. It gives misaligned header & Item.

See below Code for your ref.

• controller.js

onInit: function() {
	this.bKeys = ["RightsTypeId", "RightsTypeDesc"];
},

onValueHelpRequest:function(oEvent) { 
		this.theTokenInput = this.getView().byId("MI1");
			var that = this;	
			var _timeout;

var oMasterValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog("valueF4Master", {

				title: "XXXXXX",
				supportMultiselect: false,
				supportRanges: false,
				supportRangesOnly: false,
				key: this.bKeys[0],
				descriptionKey: this.bKeys[1],
				stretch: sap.ui.Device.system.phone, 
				ok: function(oEvent) {
		that.bTokens = oEvent.getParameter("tokens");
		that.theTokenInput.setTokens(that.bTokens);	
		oMasterValueHelpDialog.close();
				},
		cancel: function(oEvent) {
			oMasterValueHelpDialog.close();
			oMasterValueHelpDialog.destroy();
			},
			afterClose: function() {
			oMasterValueHelpDialog.destroy();
				}
			});
		var oFilterBar = new sap.ui.comp.filterbar.FilterBar({
				advancedMode: false,
				filterBarExpanded: false,
				showGoOnFB: false
			});

		if (oFilterBar.setBasicSearch) {
		oFilterBar.setBasicSearch(new sap.m.SearchField({
				placeholder: "Search and hit Enter",
				search: function(event) {
				var sQuery = event.getParameter("query");
	var oBinding = oMasterValueHelpDialog.getTable().getBinding("rows");
			var allFilters;
			if (sQuery) {
var oFilter1 = [new Filter("RightsTypeId", FilterOperator.Contains, sQuery),
new Filter("RightsTypeDesc", FilterOperator.Contains, sQuery)
		];
	allFilters = new sap.ui.model.Filter(oFilter1, false);
	oBinding.filter(allFilters);
						} else {
			oBinding.filter(allFilters);
			sap.m.MessageToast.show("No input to filter");
						}


					}
				}));
			}

		oMasterValueHelpDialog.setFilterBar(oFilterBar);
			// open dialog
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._dialog);
			this._dialog.open();
			// simulate end of operation
	_timeout = jQuery.sap.delayedCall(30, this, function() {
				oMasterValueHelpDialog.setBusy(true);


	var url = "/sap/opu/odata/sap/ZXXXXXXX_SRV/";
	var oModelDetail = new sap.ui.model.odata.ODataModel(url, true);
	var singleRowModel = new sap.ui.model.json.JSONModel();


	oModelDetail.read("/RightsTypesSet", null, null, false,
		function(oData, oResponse) {
					singleRowModel.setData(oData);
					},
					function(oError) {
				MessageToast.show("Read Filter failed");
					}
				);


		var oColModel = new sap.ui.model.json.JSONModel();
				oColModel.setData({
					cols: [
			{label: "Id", template: "Id"}, 
			{label: "Description", template: "Desc"}
					]
				});
	oMasterValueHelpDialog.getTable().setModel(oColModel, "columns");
	this.singleRowModel = singleRowModel;
	oMasterValueHelpDialog.getTable().setModel(singleRowModel);


		if (oMasterValueHelpDialog.getTable().bindRows) {
		oMasterValueHelpDialog.getTable().bindRows("/results");
				}

if (oMasterValueHelpDialog.getTable().bindItems) {
		var oTable = oMasterValueHelpDialog.getTable();
	oTable.bindAggregation("items", "/", function(sId, oContext) {
		var aCols = oTable.getModel("columns").getData().cols;
	return new sap.m.ColumnListItem({
			cells: aCols.map(function(column) {
			var colname = column.template;
 		return new sap.m.Label({
				text: "{" + colname + "}"
						});
							})
						});
					});
				}
	// oValueLibHelpDialog.setTokens(that.theTokenInput.getTokens());
				oMasterValueHelpDialog.setBusy(false);

				this._dialog.close();
			
				oMasterValueHelpDialog.open();
				oMasterValueHelpDialog.update();
			});
			_timeout = "";			
		
		},			
			

1. View.xml

<core:FragmentDefinition height="100%" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns="sap.m">
	<Wizard id="CreateProductWizard" complete="wizardCompletedHandler">
	<WizardStep id="ProductTypeStep" title="Step 1" validated="true">		<f:SimpleForm maxContainerCols="2" layout="ResponsiveGridLayout" labelSpanL="5" labelSpanM="8" emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2">
		<f:content>
		<VBox>
		<HBox>
<Label text="{i18n>Title}" design="Bold" class="sapUiTinyMarginEnd"/>
	<Text text="{Title}" class="sapUiSmallMarginEnd"/>
	<Text text="{TitleDescription}" class="sapUiLargeMarginEnd"/>
		</HBox>
 	<HBox>
	<Label text="{i18n>Lib}" design="Bold" class="sapUiTinyMarginEnd"/>
<Text text="{LibraryPrefixDescription}" class="sapUiSmallMarginEnd"/>
		</HBox>
		</VBox>
 	<HBox direction="RowReverse">
	<Text text="{BrandManagerName}"/>
<Label text="{i18n>BrandMngr}" design="Bold" class="sapUiTinyMarginEnd"/>
		</HBox>
	</f:content>
</f:SimpleForm>

	<l:Grid width="auto" class="ResponsiveGridLayout">
	<l:content>
	<Label text="{i18n>MRT}" labelFor="MI1"/>
<MultiInput id="MI1" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onMasterValueHelpRequest"/>
		<Label text="{i18n>RelType}" labelFor="MI2"/>
 <MultiInput id="MI2" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onLibValueHelpRequest"/>

<Label text="{i18n>RelCompany}" labelFor="MI3"/>
<MultiInput id="MI3" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onBrandValueHelpRequest"/>

<Label text="{i18n>Terr}" labelFor="MI4"/>
<MultiInput id="MI4" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onBrandValueHelpRequest"/>

				</l:content>
			</l:Grid>
		</WizardStep>
	</Wizard>
</core:FragmentDefinition>