hi SAPUI5 experts
I have a problem with the ValueHelpDialog component, when I use the phone's browser doesn't show in responsive mode like the demo in this link,
so here is my xml view code:
<mvc:View controllerName="com.usa.postgrados.controller.main" id="" xmlns:commons="sap.ui.commons" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:sap.ui.core="sap.ui.core" xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns="sap.m" xmlns:sap.comp.variants="sap.ui.comp.variants"> <App> <pages> <Page navButtonPress="onPress" navButtonType="Back" showFooter="false" showNavButton="true" showSubHeader="false" title="Inscripciones Postgrados" titleLevel="H1"> <content><sap.ui.layout.form:SimpleForm columnsL="2" emptySpanM="0" editable="true" columnsM="2" emptySpanL="0" emptySpanS="0" id="__form3" labelMinWidth="192" labelSpanL="4" labelSpanM="4" labelSpanS="12" layout="ResponsiveGridLayout" minWidth="0" width="100%" xmlns:sap.ui.layout.form="sap.ui.layout.form"> <sap.ui.layout.form:content> <Label id="__labe21" required="true" text="Universidad" textAlign="Begin" width="100%"/> <Input id="oIUniversidad" maxWidth="60%" width="50%" showValueHelp="true" valueHelpRequest="helpRequestUniversidad"/> <Label id="__labe22" required="true" text="Departamento Universidad" width="100%"/> <Input editable="false" fieldWidth="60%" id="oIDptoUniversidad" maxWidth="70%" width="50%"/> <Label id="__labe23" required="true" text="Ciudad Universidad" width="100%"/> <Input editable="false" fieldWidth="50%" id="oICiudadUniversidad" maxWidth="70%" width="50%"/> <Label id="__labe12" required="true" text="Fecha de Grado" width="100%"/> <Select autoAdjustWidth="false" id="oSDiaFechaGrado" selectedItemId="oIdDia_0" selectedKey="oKeyDia_0"> <items> <sap.ui.core:ListItem id="oIdDia_0" key="oKeyDia_0" text=""/> </items> <layoutData> <l:GridData indentS="0" indentXL="0" indentSmall="0" indentLarge="0" indentL="0" indentM="0" indentMedium="0" id="__data41" spanL="1" spanLarge="1" spanM="1" spanMedium="1" spanS="2" spanSmall="2" spanXL="1"/> </layoutData> </Select> <Select autoAdjustWidth="false" id="oSMesFechaGrado" selectedItemId="oIdMes_0" selectedKey="oKeyMes_0"> <layoutData> <l:GridData indentSmall="0" spanL="2" indentXL="0" indentM="0" indentLarge="0" indentMedium="0" indentS="0" indentL="0" spanLarge="2" spanM="2" spanMedium="2" spanS="3" spanSmall="3" spanXL="3"/> </layoutData> <items> <sap.ui.core:ListItem id="oIdMes_0" key="oKeyMes_0" text=""/> </items> </Select> <Select autoAdjustWidth="true" id="oSYearFechaGrado" selectedItemId="oIdYear_0" selectedKey="oKeyYear_0"> <layoutData> <l:GridData indentSmall="0" spanL="2" indentXL="0" indentM="0" indentLarge="0" indentMedium="0" indentS="0" indentL="0" spanLarge="2" spanM="2" spanMedium="2" spanS="3" spanSmall="3" spanXL="3"/> </layoutData> <items> <sap.ui.core:ListItem id="oIdYear_0" key="oKeyYear_0" text=""/> </items> </Select> </sap.ui.layout.form:content> <sap.ui.layout.form:title> <sap.ui.core:Title id="oTEduPre" text="Educación Pregrado"/> </sap.ui.layout.form:title> </sap.ui.layout.form:SimpleForm> </content> </Page> </pages> </App></mvc:View>
and this is the controller code:
sap.ui.define([ "sap/ui/core/mvc/Controller"
], function(Controller) { "use strict"; return Controller.extend("com.usa.postgrados.controller.main", { showDialog: function(oText) { var dialog = new sap.m.Dialog({ title: "Informacion", type: "Message", content: new sap.m.Text({ text: oText }), beginButton: new sap.m.Button({ text: "Aceptar", press: function() { dialog.close(); } }), afterClose: function() { dialog.destroy(); } }); dialog.open(); }, //ayuda de busqueda universidada helpRequestUniversidad: function(evt) { var oView = this.getView(); var oCBSede = oView.byId("oCBSede"); var oHelpModel = oCBSede.getModel(); var oIUniversidad = oView.byId("oIUniversidad"); var oIDptoUniversidad = oView.byId("oIDptoUniversidad"); var oICiudadUniversidad = oView.byId("oICiudadUniversidad"); var oTextSearch = oIUniversidad.getValue(); this.aKeys= ["Objid","Stext"]; var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({ basicSearchText: "", title: "Universidad", supportMultiselect: false, supportRanges: false, supportRangesOnly: false, // key: "Objid", key: this.aKeys[1], descriptionKey: this.aKeys[0], stretch: sap.ui.Device.system.phone, ok: function(oControlEvent) { var token = oControlEvent.getParameter("tokens"); var oUniversidad = token[0].mAggregations.customData[0].mProperties.value; if (oUniversidad) { oIUniversidad.setValue(oUniversidad.Stext); oIDptoUniversidad.setValue(oUniversidad.Bezei); oICiudadUniversidad.setValue(oUniversidad.Ort01); } oValueHelpDialog.close(); }, cancel: function(oControlEvent) { sap.m.MessageToast.show("Cancel pressed!"); oValueHelpDialog.close(); }, afterClose: function() { oValueHelpDialog.destroy(); } }); var oColModel = new sap.ui.model.json.JSONModel(); oColModel.setData({ cols: [ {label:"Universidad", template:"Stext"}, {label:"Pais", template:"Landx50"}, {label:"Dpto", template:"Bezei", demandPopin:true}, {label:"Ciudad", template:"Ort01", demandPopin:true} ] }); var sServiceUrl = "http://usasrvvm-ued.datacenter.local:8000/sap/opu/odata/sap/ZSLCM_POSTGRADOS_SRV"; var helpURL = "/UniversidadSet?$filter=startswith(Stext, '" + oTextSearch + "')"; oValueHelpDialog.getTable().setModel(oColModel, "columns");
// var oRowsModel = new sap.ui.model.json.JSONModel(sServiceUrl+helpURL+"?$format=json");
// oValueHelpDialog.getTable().setModel(oRowsModel); oValueHelpDialog.getTable().setModel(oHelpModel); if (oValueHelpDialog.getTable().bindRows) { oValueHelpDialog.getTable().bindRows(helpURL); } if (oValueHelpDialog.getTable().bindItems) { var oTable = oValueHelpDialog.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 + "}" }); }) }); }); } var oFilterBar = new sap.ui.comp.filterbar.FilterBar({ advancedMode: true, filterBarExpanded: false, showGoOnFB: sap.ui.Device.system.phone, filterGroupItems: [new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n1", label: "Universidad", control: new sap.m.Input().setValue(oTextSearch) })], search: function() { var oText = arguments[0].mParameters.selectionSet[0].getValue(); helpURL = "/UniversidadSet?$filter=startswith(Stext, '" + oText + "')"; var oTable2 = oValueHelpDialog.getTable(); oTable2.unbindRows(); oTable2.bindRows(helpURL); if (oTable2.bindItems) { oTable2.bindAggregation("items", "/", function(sId, oContext) { var aCols = oTable2.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 + "}" }); }) }); }); } sap.m.MessageToast.show("Search pressed '" + oText + "''"); } }); if (oFilterBar.setBasicSearch) { oFilterBar.setBasicSearch(new sap.m.SearchField({ showSearchButton: sap.ui.Device.system.phone, placeholder: "Search", search: function(event) { oValueHelpDialog.getFilterBar().search(); } })); } oValueHelpDialog.setFilterBar(oFilterBar); if (oIUniversidad.$().closest(".sapUiSizeCompact").length > 0) { // check if the Token field runs in Compact mode oValueHelpDialog.addStyleClass("sapUiSizeCompact"); } else { oValueHelpDialog.addStyleClass("sapUiSizeCozy"); } oValueHelpDialog.open(); oValueHelpDialog.update();
}
});
});when I swicth to phone mode in chrome the demo app looks like this:
but my app looks like this:
I keep seaching why my table doesn't get responsive but I haven't get any solution 
.
any help it's appreciated 
regards