Combo, multicombo popup list height

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

Tagged:

Comments

  • edited April 10

    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

  • 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)

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

  • 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

  • edited April 15

    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

  • Thanks a lot @Nastja !
    Almost perfect :-) 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?

  • 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

  • Thank you @Nastja !

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion