Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi there,
I would like to know if there is some way to specify the max number of items in a combobox' dropdown list. As for listboxes in mold select, any "rows" value other than 1 seems to invalidate the mold attribute.
Any suggestion as to how accomplish this? And if not, would it be acceptable as a feature request? Are there any html limitations preventing this? My goal is to avoid a long dropdown item list surpassing the bottom of the page (a scroll bar should be displayed in order to reach the items beyond the specified limit).
With kind regards
César Varona
Do you use model to handle the combobox ?
If yes , it should be easily to handle the item amount by ListModel.
Maybe try to use ListModel , and get the subList from ListModel with the real amount you need?
http://www.zkoss.org/javadoc/5.0.5/zk/org/zkoss/zul/ListModelList.html#subList(int, int)
Hi Tony,
even if it were possible to listen to the scrolling in the unfolded item list and reset the combo's model as the user scrolls down at the same time that I prevent the combo from being invalidated and repainted I'm afraid it would be much effort and incredibly slow. Unless it's not that what you're trying to say, of course.
With kind regards
César Varona
I think I didn't get your point at this question , could you provide a sample zul for it?
Or you could check the document first. Hope this helps.
http://books.zkoss.org/wiki/ZK_Component_Reference/Input/Combobox#Autocomplete_by_ListSubModel
Hi Tony,
I know what you talk about, but my point is much simpler and has nothing to do with autocomplete or autodrop features. It's just that I'd like to set a number of items in the dropdown lists of listbox and combobox other than 20, say 5 for example. In the case of combobox I don't mean "the number of items which match the letters typed by the user" (usually 15 with the available submodel implementations) but just the plain and sheer number of items, with no autocomplete involved, i.e., regardless of whether the user has typed something into the combo's input field or not.
With kind regards
César Varona
If you have a model for 50 items ,and you just want to show it about 20 items.
so you have a combobox
Combobox copmbo ,
ListModelList list = getModels(); //implements the model init by your self
and now your list.size() is 50 , you want to get it show up about 20 .
Why not just try to get
combobox.setModel(list.subList(0,20)); // now you have a model that size() == 20 , and it will show up 20 items .
If you could get a simple zul to explain what you want , that will really helps.
Hi Tony,
just try the following:
<combobox>
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
</combobox>It's a test meant for combobox but the same goes for listboxes in mold 'select'. The items displayed are irrelevant, and so does its number: anything in excess of 20 will do.
Just unfold the dropdownlist by clicking of the button; there are 45 items in the model, and you see 20 of them in a given moment; in order to reach the remaining ones you have to (rather conveniently) use the scroll bars. Everything fine so far.
So now imagine you have such a whimsical and intransigent customer as I do who says it's unacceptable to show 20 items and that rather 5 should be displayed. The remaining ones should keep on belonging to the model and being accesible via scroll bars. Is there any way to achieve this? Please pay attention to the fact that your solution, if I've understood it correctly, involves trimming the model off items in excess of 20. That's not what I'm saying: I just want to limit the item count that makes the scroll bars appear.
With kind regards
César Varona
ok , got your point , the thing you really care is actually the visible items,
sorry for misunderstanding your question.
I have to say , currently it's not supported yet by ZK,
you could do some overwrite in client side , but it's not recommended , since it might break after you got newer update in future.
Or you could wait ZK to build it to future version ,
you could follow the feature request : https://sourceforge.net/tracker/?group_id=152762&atid=785194
The client side way will not get ANY WARRANTY and might break after next version.
<combobox xmlns:w="client">
<attribute w:name="_fixsz"><![CDATA[
function (ppofs) {
var maxheight = 200; // config it here , it's pixels that show up ,
// it's hard to know the item height and show it now , currently you could only set the height for popup .
var minheight = 10;
this.$_fixsz(ppofs);
var pp = this.getPopupNode_();
if (!pp) return;
if (ppofs[1] == "auto" && (pp.offsetHeight > maxheight || pp.offsetHeight > 349)) {
pp.style.height = jq.px(maxheight);
} else if (pp.offsetHeight < minheight || pp.offsetHeight < 30) {
pp.style.height = jq.px(minheight); //minimal
}
}
]]></attribute>
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
<comboitem label="Simple and Rich" />
<comboitem label="Cool!" />
<comboitem label="Thumbs Up!" />
</combobox>
I realize this is an old thread, but just stumbled across it.
Actually, there is a much simpler solution to this problem that requires you to override a couple of CSS rules:
.z-combobox-pp,
.z-combobox-rounded-pp {
display: inline-block;
max-height: 160px;
overflow-x: hidden;
}
.z-comboitem,
.z-comboitem a,
.z-comboitem a:visited {
line-height: 40px;
}
So, in this case, I want each comboitem to have a 40px height, and I want four items to show, with the remaining combobox items available via scrolling. The above CSS will do the trick.
Asked: 2011-05-06 07:25:45 +0800
Seen: 1,109 times
Last updated: Feb 07 '13