ComboBox with empty spaces

asked 2016-05-10 08:55:37 +0800

Mrye
3 ● 2

updated 2016-05-16 05:46:31 +0800

Hi, I encounter this issue when I'm using combobox. Something like below :

=============
=  item_1   =
=  item_2   =
=  item_3   =
=           =
=           =
=           =
=============

But I only get this empty spaces when my item is > 11 --Edited : Not 10--. I'm using zk 8.0.1.1 and I'm not using any css on this combobox.

I want that combobox to fit based on the content. How to achieve this ?

Update 1

It happened on both model and insert directly. Only happened when item > 10. Here's for using model.

<p:combobox width="200px" readonly="true" selectedItem="@bind(vm.selectedItem)" model="@load(vm.list)">
    <template name="model" var="item">
        <comboitem label="@load(item.name)" value="@load(item.value)" />
    </template>
</p:combobox>

It seems like it auto assign fixed height on the combobox. As inspected in Chrome :

element.style {
    z-index: 1800;
    width: 219px;
    height: 350px;
    position: absolute;
    top: 245px;
    left: 321px;
}

Update 2

Thanks for replying. I've checked my DOM :

<div id="i2HQu3-pp" class="z-combobox-popup  z-combobox-open z-combobox-shadow" style="z-index: 1800;width: 219px;height: 350px;position: absolute;top: 245px;left: 299px;">
    <ul id="i2HQu3-cave" class="z-combobox-content" style="height: auto;width: 100%;">

The content size is 300px which is less than 350px. The popup should follow the size of the child right ?, but somehow it sets a fixed 350px height.

This thing occur when comboitem is 12, when comboitem <12, the popup height is set to auto. Weird.

Since you cannot replicate this problem, is it because of my zk library/config ? Any extra information you need ?

Update 3

Hi, yep.. those lines :

_fixsz: function(d) {
    var c = this.getPopupNode_();
    if (!c) {
        return
    }
    var b = this.getPopupNode_(true);
    if (d[1] == "auto" && c.offsetHeight > 350) {
        c.style.height = "350px"
    } else {
        if (c.offsetHeight < 10) {
            c.style.height = "10px";
            if (this._shadow) {
                this._shadow.sync()
            }
        }
    }

I try to debug those variables :

tempPopup = c
<div id=​"yJ4Wz1-pp" class=​"z-combobox-popup" style=​"z-index:​ 1800;​ width:​ auto;​ height:​ auto;​ position:​ absolute;​ top:​ 3px;​ left:​ 380px;​ display:​ block;​">...</div>​

tempContent = c.childNodes[0]
<ul id=​"yJ4Wz1-cave" class=​"z-combobox-content" style=​"height:​ auto;​ width:​ auto;​">​...</ul>​

//- During checking condition
tempPopup.offsetHeight
446
tempContent.offsetHeight
439
tempContent.childNodes[0].offsetHeight
29  //- 29.31

//- After checking
tempPopup.offsetHeight
350
tempContent.offsetHeight
300
tempContent.childNodes[0].offsetHeight
20

It seems like the content/item is the problem. It changes after that, leaving 50px height of empty space. I got 15 items inside the dropdown. Any factors that make the content change it's height ?