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

6 posts, 0 answers
  1. AJ
    AJ avatar
    33 posts
    Member since:
    Jun 2011

    Posted 06 Dec 2012 Link to this post

    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
  2.
  3. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 07 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 04 Dec 2013 Link to this post

    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
  7. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 09 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. Rem
    Rem avatar
    3 posts
    Member since:
    Sep 2017

    Posted 29 Aug 2018 in reply to Mark Kucera Link to this post

    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

  11. Peter Milchev
    Admin
    Peter Milchev avatar
    740 posts

    Posted 03 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top