-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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 ?
Hi,
We have identified the cause of this behavior for a combobox in a grid: http://tracker.zkoss.org/browse/ZK-3323
Workaround:
<style>
.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;
}
</style>
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?
Regards
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
<client-config>
<debug-js>true</debug-js>
</client-config>
https://www.zkoss.org/wiki/ZKClient-sideReference/Introduction/Debugging
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 8.0.1.1 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
Regards
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
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
Asked: 2016-05-10 08:55:37 +0800
Seen: 72 times
Last updated: Sep 09 '16