DropDownAutoWidth makes the drop down narrower if it's width is smaller than the combobox

[AJ]

First off, I'm ecstatic that this has been developed... a step in the right direction! However, I have one tiny suggestion and it's purely from a UI perspective.

I think if the calculated drop down width is less than the RadComboBox width, it should "default" to the RadComboBox width. If you view my attachment (the too short one), you'll see what happens.

I love that this is done on the client side and would really love to know if there's a work around. Otherwise, I think I'm going to use my "in house" method which is done via server side (and isn't as efficient). This isn't code completely written by me, but I'll post what I currently have in case there are any suggested workarounds or if others are interested.

I have a general utility that calculates the width of text:

public static int TextWidth(string text, string fontName = "Segoe UI", float fontSize = 15)
{
    using (var textBitmap = new Bitmap(1, 1))
    {
        using (var drawGraphics = Graphics.FromImage(textBitmap))
        {
            using (var drawFont = new System.Drawing.Font(fontName, fontSize, GraphicsUnit.Pixel))
            {
                return Convert.ToInt32(drawGraphics.MeasureString(text, drawFont).Width);
            }
        }
    }
}

And then I have an extension method:

public static Unit AutoDropDownWidth(this RadComboBox comboBox)
{
    var rcbWidth = Utilities.TextWidth(comboBox.Items.OrderByDescending(i => i.Text.Length).Take(1).Select(i => i.Text).First());

    return rcbWidth <= comboBox.Width.Value ? comboBox.Width : rcbWidth;
}

So, in my code behind I just have something like:
rcbSalesReps.DropDownWidth = rcbSalesReps.AutoDropDownWidth();

Just something to consider. To me, if I look at the attachments, I think the "just right" version looks much better than the "too short" one.

I'm open to any ideas or suggestions!

Thanks,
Andrew

[Peter Filipov]

Hello Andrew,

Thank you giving us your feedback.

The drop down auto width feature is based on CSS under Firefox, Chrome, Safari and IE10. For the rest of the browsers the feature is implemented with javascript and CSS. We decided to set min-width of the DropDown to be 158px. In order to set minimum width of the DropDown you need to use the following CSS:

/* the following values are default for the drop down width */

.rcbAutoWidth {
    min-width: 158px;
}

/*IE8 fix*/
@media \0screen
{
    .rcbAutoWidth .rcbList
    {
        min-width: 142px;
    }
}

We had some issues with the online documentation and next week we are going to update it.

Let me know if you need further assistance.

Kind regards,
Peter Filipov
the Telerik team

[Mark Kucera]

Is there a way to make this more dynamic?  I really like the DropDownAutoWidth="enabled" except when the drop down width is shorter than the width of the combobox itself.  I read the suggestion about how to override the min size, but ideally I would want to set the min size to be set to the ComboBox width. 

Thus the ideal behavior would be that when DropDownAutoWidth was enabled, the drop down would be the same size or wider than the combo box, it would never be shorter.

Regards,
-Mark

[Peter Filipov]

Hi Mark,

Regarding to your suggestion you could create a feature request and vote for it. We are reviewing the items in our portal and trying to implement the most valuable for our clients.

Regards,
Peter Filipov
Telerik

[Rem]

Hi Mark/Peter,

Was this ever added? I'm using multiple RadComboBox's on 1 page, but they each have a different width. So this solution doesn't seem to work for that - or am I missing something?

Best regards,

Remco

[Peter Milchev]

Hello Remco,

You can bind the OnClientLoad event of the ComboBoxes and set the min-width programmatically as demonstrated below: 

<script>
    function OnClientLoad(sender, args) {
        sender.get_dropDownElement().style.minWidth = sender.get_element().style.width;
    }
</script>

<telerik:RadComboBox ID="RadComboBox1" OnClientLoad="OnClientLoad" Width="390px" DropDownAutoWidth="Enabled" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>

Regards,
Peter Milchev
Progress Telerik