DropDownList – Width grows when used in

[wmklabornParticipant]

When using the dropdownlist with the width=’some %’ inside a <fieldset> tag and checkboxes:true, when selecting many items from the list the dropdownlist continues growing with each new selection. Below is a sample data set where I was able to exhibit this behavior. If <fieldset> is removed from the HTML, then the dropdownlist behaves without issue.

<div>
<form role=’form’>
<div class=’form-group’>
<fieldset>
<div class=’row row-buffer-sm’>
<div class=’col-md-2 col-sm-2 col-xs-6′>
<div id=’DropDown2′></div>
</div>
<div class=’col-md-2 col-sm-3 col-xs-6′>
<div id=’jqxDropDownList’></div>
</div>
</div>
</fieldset>
</div>
</form>
</div>

var source = [
“Affogato 111111111111”,
“Americano 22222222222”,
“Bicerin 3333333333333”,
“Breve 4444444444444444”,
“Café Bombón”,
“Café au lait”,
“Test Text 11111”,
“Test Text 22222”,
“Test Text 33333”,
“Test Text 44444”,
“Text Text 55555”,
“Test Text 66666”,
“Test Text 77777”,
“Test Text 88888”,
“Test Text 99999”,
“Test Text 11111”,
“Test Text 22222”,
“Test Text 33333”,
“Test Text 44444”,
“Text Text 55555”,];

var source2 = [
“Warehouse”,
“Warehouse 1”,
“Warehouse 2”,
“Warehouse 3”,
“Warehouse 4”,
“Warehouse 5”,
“Warehouse 6”,
“Warehouse 7”,
“Warehouse 8”,
“Warehouse 9”];
// Create a jqxDropDownList
$(“#jqxDropDownList”).jqxDropDownList({
source: source,
width: ‘100%’,
selectedIndex: 3,
checkboxes: true,
theme: ‘energyblue’
});

$(“#DropDown2”).jqxDropDownList({
source: source2,
selectedIndex: 0,
checkboxes: false,
theme: ‘energyblue’
});

Thanks,
wmklaborn

[wmklabornParticipant]

Clarification…

This code works fine in previous version 3.4, but doesn’t work the same in version 3.5.

wmklaborn

[Peter StoevKeymaster]

Hi wmklaborn,

This seems to be a wrong behavior of the FieldSet. HTML Element with fluid size should be put in a container which is not with Auto width/height. To resolve this, simply set the min-width of your fieldset to 0.

Best Regards,
Peter Stoev

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

[Author]

Posts