autoItemsHeight true and Group Title problems

[bmacwilliamParticipant]

If autoItemsHeight is set to true, the first group display seems to get mixed up. You can try this code:

var source = [{
    label: "Peppermint Hot Chocolate",
    value: "Chocolate Beverage",
    group: "Hot Chocolate"
}, {
    label: "Salted Caramel Hot Chocolate",
    value: "Chocolate Beverage",
    group: "Hot Chocolate"
    }, {
    label: "White Hot Chocolate",
    value: "Chocolate Beverage",
    group: "Hot Chocolate"
    }, {
    label: "Caffe Americano",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Caffe Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Caffe Mocha",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Cappuccino",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Caramel Brulee Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Caramel Macchiato",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Peppermint Hot Chocolate",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Cinnamon Dolce Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Eggnog Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Espresso",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Espresso Con Panna",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Espresso Macchiato",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Flavored Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Gingerbread Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "White Chocolate Mocha",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Skinny Peppermint Mocha",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Skinny Flavored Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Pumpkin Spice Latte",
    value: "Espresso Beverage",
    group: "Espresso"
}, {
    label: "Caffe Vanilla Frappuccino",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}, {
    label: "Caffe Vanilla Frappuccino Light",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}, {
    label: "Caramel Brulee Frappuccino",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}, {
    label: "Caramel Brulee Frappuccino Light",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}, {
    label: "Eggnog Frappuccino",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}, {
    label: "Mocha Frappuccino",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}, {
    label: "Tazo Green Tea Creme Frappuccino",
    value: "Frappuccino Blended Beverage",
    group: "Frappuccino"
}]
// Create a jqxListBox
$("#jqxListBox").jqxListBox({source: source, width: 300, height: 300, theme: 'darkblue', autoItemsHeight: true});

[Ivo ZhulevParticipant]

Hi bmacwilliam,

That’s because the jqxListBox does not have such property autoItemsHeight.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[tandreasenParticipant]

Strangely enough, I’ve observed the exact behavior: if I set autoItemsHeight to true, the horizontal scrollbar dissapears (when items in the listbox are too long). I’ve actually taken it upon myself to look at the code, and it looks like the jqxlistbox.js has several references to such a property (and looking in the code, there are several alterations to width size, etc.) – it would be nice if this worked and auto-wrapped the items inside without showing a scroll bar.

[Ivo ZhulevParticipant]

Hi tandreasen,

You may have seen some references to it but it is not working. You brake the widget using it.
Thats why it is not in the documentation. itemHeight is the prop equivalent to autoItemsHeight.
See it in the documentation.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[brojgarParticipant]

Good day,
I am using jqx ListBox widget and the only way to have auto-wrapped items without horizontal scrollbar is to use

autoItemsHeight = false;

I know that this property is not documented and that will, as you stated in the forum posts, break the widget (first group name is newer shown) but without it auto wrapping won’t work no matter what I do in custom renderer function. Items with long text will always span all the way and cause horizontal scrolling to take effect. I can set the width of the item’s container (div) to some absolute value, but that won’t work for me as my control is resizable, hence I need something like width: 100%.

Is there some other solution for that? Thanks for your answer.

Regards,
Iztok

[Author]

Posts