Quantcast
Channel: SCN : All Content - SAPUI5 Developer Center
Viewing full articles (6178 articles)
Browse article index
↧

sap.m.multicombox not responsive on smaller screens

$
0
0

Hi All,

 

I have created a ux3 ShellDialog in my Fiori App in which I am displaying multicomboboxes . When I view the app in mobile on smaller screen , the shelldialog automatically resized itself (responsive) but the multicomboboxes are not automatically re-sized . There is a scrollbar added at the bottom and hence the user have to scroll to the right to select the combobox arrow for showing dropdown. I have used sap.ui.layout.HorizontalLayout. Is there anyway I can make these multicombo box responsive or this is the only default behaviour possible for this control. Please find the screenshots below (with full screen and with small screen) and code below

 

var oHorz_Layout1 = new sap.ui.layout.HorizontalLayout({content:[new sap.m.Label({text:"PO Date Range",                                                                               width:"120px"                                                                             }).addStyleClass("comboLabel"),                                                                 new sap.m.DateRangeSelection({width:"250px",                                                                                           delimiter:"To",                                                                                           displayFormat:"dd/MM/yyyy"})                                                                                                                           ]});        var oHorz_Layout2 = new sap.ui.layout.HorizontalLayout({content:[new sap.m.Label({text:"Vendor",                                                                                     width:"120px"                                                                                   }).addStyleClass("comboLabel"),                                                                         new sap.m.MultiComboBox("Combo_Vend",                                                                                        {width:"350px",                                                                                             maxWidth:"100%"}                                                                                       )                                                                       ]});                                                                                                                             var oHorz_Layout3 = new sap.ui.layout.HorizontalLayout({content:[new sap.m.Label({text:"Company",                                                                                     width:"120px"                                                                                   }).addStyleClass("comboLabel"),                                                                         new sap.m.MultiComboBox("Combo_Comp",                                                                                         {width:"350px",                                                                                              maxWidth:"100%"})                                                                     ]                                                       });                var oBtn_setFilter = new sap.m.Button({text:"Save",                                          press: oController.fetch_po});        var oVert_Layout = new sap.ui.layout.VerticalLayout({content:[oHorz_Layout1,oHorz_Layout2,oHorz_Layout3,oBtn_setFilter]});          var oPanel_Filter = new sap.m.Panel({headerText:"Filter Criteria",                                             expandable: false,                                             content:[oVert_Layout]                                           });

resp1.JPG

                        Full Screen

 

resp2.JPG

 

                        Small screen

↧

Viewing full articles (6178 articles)
Browse article index

Latest Images

Trending Articles



Latest Images