Auto width for selecting text

2 posts, 0 answers
  1. Nicholas Walker
    Nicholas Walker avatar
    30 posts
    Member since:
    Jul 2008

    Posted 15 Jul 2013 Link to this post

    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.

  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 16 Jul 2013 Link to this post


    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


    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');



  3. DevCraft R3 2016 release webinar banner
Back to Top