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?

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