Search code examples
csscomboboxsapui5

How to set height of combo box drop down list in sapui5?


I need to set max-height for dropdown list in combobox in sapui5. I have tried with the following code.

#comboBox1-popup.sapMPopover {
    max-height: 400px;
  
}

#comboBox1.sapMPopoverScroll {
    max-height: 400px !important;
    
}

Via css i cant set height for the particular combobox in a project. When i tried "sapMPopover" its changes the height of all the combo boxes in my entire project. I want to set max-height for the particular combo box. Thanks in advance.


Solution

  • As there is now direct property for the max-height or access to the popover from xml. You need to wait until the popover list is initialized than you can get it from the ComboBox and add a custom class to it.

    In the page controller

    onAfterRendering: function(){
      this.exec(this);
    },
    
    exec: function(self){
      var oCombo = self.getView().byId("MyComboBox"),
      oPopOver = oCombo.getList();
      if(oPopOver !== null
        && oPopOver !== undefined){
        oPopOver.addStyleClass("test");
      }else{
        setTimeout(self.exec, 1, self);
    
      }
    }
    

    In the css file you can write now

    .test {max-height: 100px !important;}