Combo, multicombo popup list height

Webix JS
#1

Is there a way to make combo / multicombo popup list to show as many items as possible without going off screen? I know I can use yCount, but I don’t know how high will be user’s window, so it doesn’t work that way, for example: https://snippet.webix.com/ouhkdrxv

#2

Hi @maug ,

You can add height to the type of the list

 view:"multicombo",   
  suggest: {
    body:{
      ...
      type: {
      height:60
    }

Please check the sample: https://snippet.webix.com/kzt9xn32

#3

Thanks @Nastja.
How to calculate popup height to fill entire height of the screen below? I want it to be as high as possible, but also:

  1. not higher than all items (the samy way that yCount works)
  2. not off-screen (not the way yCount works)
#4

For example,
It’s possible to change yCount depending on the number of rows:
https://snippet.webix.com/ay9xj3uq

#5

Thanks @Nastja, it doesn’t work well (in fact, doesn’t work at all), if number of items is 90:
https://snippet.webix.com/f9uy7wyi

#6

You can use onShow(count the position of the popup) and onHide(refresh the height of the popup) events

view:"multicombo",   
      suggest: {
        on:{
          onShow(){
            let top = this.config.top + 10, 
                left = this.config.left,
                screenH = window.innerHeight,
                list = this.getList();                
            list.define({height:screenH - top});
            list.refresh(); 
            this.resize(); 
          },
          onHide(){
            let list = this.getList();               
            list.define({height:100});
            list.refresh();
          }
        }

Sample: https://snippet.webix.com/1pcoaxge

#7

Thanks a lot @Nastja !
Almost perfect :slight_smile: The only problem is when there is just a few items - popup list is higher than necessary: https://snippet.webix.com/pdplgon2
I couldn’t figure out a way to handle both cases (1. many items - list as high as possible, 2. few item - list just high enough). Could you help?

#8

Hi @maug ,

It’s possible to calculate the height which is required to display all elements:

listheight = list.count()*list.type.height;

and get a minimal height

list.define({height:Math.min(screenH - top, listheight)})

Sample: https://snippet.webix.com/tye6s4w0

#9

Thank you @Nastja !