item-text longer than dropdown-width vs parent's width

[rjParticipant]

Hi,
As the title says, I encounter this when running below code. Please select “bicerin with extra long long text” first then select others. I hope you’ll notice the table’s column forced to be wider due to the wider item-text. I guess the correct behavior is: the dropdownlist width should not change and ellipsis should display ? thanks.

var source = [
“Affogato”,
“Americano”,
“Bicerin”,
“Bicerin with extra long long text”,
“Breve”,
“Cuban espresso”,
“Liqueur coffee”
];

$(“[id^=’DESC’]”).jqxDropDownList({ width: ‘100%’, height: ’25’, source:source, dropDownWidth:300});
$(“:contains(‘CODE’)”).css(‘max-width’,250);

<table border=”1″ style=”width:80%;”>
<tr>
<td>CODE</td>
<td><div style=”min-width:0;” id=”DESC0″></div></td>
</tr>
<tr>
<td>CODE</td>
<td><div style=”min-width:0;” id=”DESC1″></div></td>
</tr>
<tr>
<td>CODE</td>
<td><div style=”min-width:0;” id=”DESC2″></div></td>
</tr>
</table>

[ivailoParticipant]

Hi rj,

Please, use bigger value for max-width.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[rjParticipant]

Hi Ivailo,
Thanks for replying. I’m terribly sorry, I should have made myself clear from the beginning. The layout I maintain is fixed, and changing max-width value will simply break it, so changing max-width is not applicable in my case. Actually I was expecting standard behavior of dropdownlist (as in desktop apps), i.e. stay with its size (width) and display the content the best it can.

warm regards,
rj

[ivailoParticipant]

Hi rj,

If your layout is fixed, then use fixed values in your jqxDropDownLists.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[rjParticipant]

Hi Ivailo,

It’s pretty close, thank you. Now I got a clearer picture about this nice widget, especially its “fluid” mode. That’s why I put ..jqxDropDownList({ width: ’100%’… Even the layout is fixed, when the browser window resizes the layout will scale itself proportionally including spaces for it’s children (some of them are DropDownList). Again, sorry for not being enough clear about this.
The strange behavior so far (in my opinion) occurs only with DropDownList (in fluid-mode). I guess, in fluid-mode, it should strictly bound to container’s dimension and represent the currently selected item the best it can. Anyhow, your above approach is applicable for my situation, I just have to modify resize() event to do “manual-fluid”. It’s ok now.

many thanks,
rj

[Author]

Posts