Auto width for selecting text

[Nicholas Walker]

Say I have 3 items in a drop down with widths of 100px, 200px and 300px.

I set the DropDownAutoWidth to enabled.  I do not set a width property so it is defaulting to it looks like 158px.

I expand the drop down and the width of the drop down gets set to 300px, so all items are shown on one line.  I select the 300px item, the selection box is still at 158 px, so the last 162 pixels are trimmed and you can't see them.

Would it be possible to instead.

I select an item that is 100px, after selection the box trims to 100 pixels.  I select another item 300px, the selection box now turns to 300 pixels, and so fourth.

[A2H]

Hi,

Please try the below implementation

1)      1) Add a span in your aspx page

<span id="stringcontainer" style="visibility: hidden; white-space: nowrap;"></span>

2)      2) Hook the  “OnClientSelectedIndexChanged” event in RadComboBox

OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"

3)      3) Add the following Javascript methods to your page

function SelectedTextWidth(textToMeasure) {

                var ruler = document.getElementById("stringcontainer");

                ruler.innerHTML = textToMeasure;

                return ruler.offsetWidth;

            }

            function OnClientSelectedIndexChanged(sender, eventArgs) {

                    var stringWidth =0;

                    stringWidth = SelectedTextWidth(eventArgs.get_item()._text);

                    var combo = $find("<%= RadComboBox2.ClientID %>");

                    $(combo.get_element()).css("width", stringWidth +'px');

                    var inputArea = combo.get_inputDomElement();

                    $(inputArea).css("width", stringWidth +'px');

            }


Thanks,
A2H