ComboBox with empty spaces

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

Mrye gravatar image 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 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)" />

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

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
29  //- 29.31

//- After checking

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 ?

delete flag offensive retag edit

6 Answers

Sort by » oldest newest most voted

answered 2016-09-09 04:51:58 +0800

MDuchemin gravatar image MDuchemin
2136 1 5
ZK Team

updated 2016-09-09 04:52:22 +0800


We have identified the cause of this behavior for a combobox in a grid: http://tracker.zkoss.org/browse/ZK-3323


.z-column-content .z-comboitem, .z-row-content .z-comboitem, .z-group-content .z-comboitem, .z-groupfoot-content .z-comboitem, .z-footer-content .z-comboitem {
line-height: initial;
link publish delete flag offensive edit

answered 2016-05-11 04:30:58 +0800

MDuchemin gravatar image MDuchemin
2136 1 5
ZK Team

Hi Mrye,

How are you creating this combobox? Do you set any attribute on it? Also, are you using a model, or are you creating the comboitems directly?

link publish delete flag offensive edit

answered 2016-05-11 09:16:39 +0800

zkossahmadkarno gravatar image zkossahmadkarno

the combobox is created by dragging the combobox item into sheet so that the combobox can be set into attribute and can be model into comboitems that is fashion model

link publish delete flag offensive edit

answered 2016-05-13 02:59:15 +0800

MDuchemin gravatar image MDuchemin
2136 1 5
ZK Team

updated 2016-05-13 02:59:55 +0800

Hi Mrye,

Thanks for the additional info, I did a bit of testing here, and I couldn't get this behavior on my side.

Basically, what should happen is, when you open the popup, the zul.inp.ComboWidget.zk.$extends._fixsz (zul.inp.wpd) method should trigger.

What this method do is: It finds the popup content (<ul id="[UUID]-cave" class="z-combobox-content" style="height: auto; width: auto;"> ... </ul> and it calculates the size of the popup based on the size of the content.

If the content is > 350px, the popup is limited to 350px by adding height:350px on the popup (that is probably the case looking at your css result)

Otherwise, it should size based on the content.

Can you open the combobox, then use the dom explorer to check the size of the content node? This might give you a clue on why the popup doesn't scale down. If the content

    is >350, then you may need to check why this is the case.

link publish delete flag offensive edit

answered 2016-05-13 07:29:04 +0800

MDuchemin gravatar image MDuchemin
2136 1 5
ZK Team

updated 2016-05-13 07:29:30 +0800

Hi Myre,

Thanks for the info, There might be an issue in the popup calculation of the content height. The best solution would to activate the js debug mode on your side, by adding the following to your zk.xml



This will let your server outpout non-minified code, and should let get a better idea from your browser's developer tools. If you put a breakpoint in wk.wpd, combowidget._fixsz() method (in ZK should be line 2053), you can take a look at the calculation directly. Specifically, I would recommend looking into this block, since this is where the height is set on the popup:

    if (ppofs[1] == 'auto' && pp.offsetHeight > 350) {
        pp.style.height = '350px';

If you can see the values of ppofs[1] and pp.offsetHeight, there should be the reason for this behavior


link publish delete flag offensive edit

answered 2016-05-17 10:06:32 +0800

MDuchemin gravatar image MDuchemin
2136 1 5
ZK Team

Hi Myre,

Based on these values, I agree. The issue seem that the popup content is resided after the popup height calculation.

The initial value for popup content.offsetHeight is:439, so the popup height is correctly calculated to 350px. However, the content resizes to 300 afterward leaving a 50px gap.

I see that the row height in this control goes from 29.31 to 20px, which is coherent with the initial and end sizes.

29.31 x 15 ~= 439 & 20 x 15 == 300

The 20px rowHeight at the end is the default (expected) value without custom css. If you activate the breakpoint at the begining and look into the dom, can you see if the rows actually have a 29px height? any css style that would cause these heights?


link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



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

Seen: 72 times

Last updated: Sep 09 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More