Word wrapping the text

[GregoryHouseMDParticipant]

I’m posting this here because the ComboBox dropdown is generated with the ListBox widget, I’ll move it to the ComboBox forum if necessary.

I’m using remoteAutoComplete to fetch the text for the ComboBox, and some of the text is quite long and overflows in the dropdown, something I don’t to happen. I don’t want any horizontal scrolling what so ever. I tried to add some css, but haven’t been successful. The combobox width is 100%, and if I could make the dropdown width same as the combobox that would be awesome.

[Peter StoevKeymaster]

Hi GregoryHouseMD,

The dropDownWidth property defines the width of the dropdown. Ex: http://jsfiddle.net/jqwidgets/UuVTx/. The dropDown’s width is equal to the combobox’s width by default: http://jsfiddle.net/7u1th6m8/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[GregoryHouseMDParticipant]

Sorry, I didn’t quite explained it correctly. This is what is generated:

<div id="listBoxContentinnerListBoxjqxWidgetaef5395b" style="-webkit-appearance: none; outline: none; border: none; padding: 0px; overflow: hidden; margin: 0px; left: 0px; top: 0px; position: absolute; width: 475px; height: 171px; background: transparent;">
    <div style="outline: none 0px; overflow: hidden; width: 1006px; position: relative; height: 384px;">
        <div role="option" id="listitem0innerListBoxjqxWidgetaef5395b" class="jqx-listitem-element" style="height: 24px; top: 0px; left: 0px;">

            List Box items go here

        </div>
    </div>
</div>

As you said, the dropdown is as wide as the combo box, but the items overflow to the right and you’d have to scroll to the right to read them all. I want the list box items text to wrap so the users won’t have to scroll.

[Peter StoevKeymaster]

Hi GregoryHouseMD,

Yes, you will need to scroll if items overflow. There is no other option.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ice79Participant]

The only one variant to prevent of horisontal scroll (i’ve found) (example listbox width : 250px) :

1) insert lines in source of listbox via { html: ‘<div class=”listboxline”>’+ your text+ ‘</div>’ … }
2) in your css – define
.listboxline {
width: 200px;
white-space: normal;
}
3) ajust width of ‘.jqx-listitem-element’ via javascript after Listbox is created (i set width=200px)

[ice79Participant]

found a better way in

just add property to your Listbox: autoItemsHeight: true

[Author]

Posts