How to align to the left the text of the ComboBoxItem when it is too long

3 posts, 0 answers
  1. Misty Fowler
    Misty Fowler avatar
    2 posts
    Member since:
    Jan 2010

    Posted 06 Oct 2010 Link to this post

    Some of the items in my RadComboBox are long, and wrap when the dropdown opens. The issue is that in Internet Explorer, when you select one of these items with your mouse, the selected item is aligned wrong. It should display the beginning of the selection, with the end of it hidden. That is the behavior in other browsers. IE also works properly when you use the keyboard to make the selection. This issue is only when the mouse is used to select the item. It appears that using the mouse leaves the text selected, and might have something to do with why this is happening, but setting EnableTextSelection to false does not resolve the issue.

    In the demo, if you look at it in IE, you can reproduce the problem. After loading the page, use the mouse to open the "Dealer" combo. It's the most obvious when you select an item that's very long, such as "Nord-Ost-Fisch Handelsgesellschaft mbH". The text that will show is "Ost-Fisch Handelsgesellschaft mbH", because it's aligned wrong. What should be showing is "Nord-Ost-Fisch Handelsgesellsch".

    I do see an article for your Silverlight controls that shows how to resolve the issue, so I'm hoping you have a resolution for these controls.


  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 07 Oct 2010 Link to this post

    Hello Misty Fowler,

    Thank you for contacting us.

    You can assign these handlers to OnClientDropDownClosing and OnClientKeyPressing RadComboBox events:
    function keyPressing(sender, args) {
        var event = args.get_domEvent();
        if (event.type == 'keydown' && (event.keyCode == 38 || event.keyCode == 40))
            setTimeout( function () { dropDownClosing(sender, args) }, 0 );

    function dropDownClosing (sender, args) {
        var inputElement = sender.get_inputDomElement();
        if (inputElement.setSelectionRange)
            inputElement.setSelectionRange(0, 0);
        else {
            var textRange = inputElement.createTextRange();
            textRange.moveEnd('sentence', -100000); // A bug in IE prevents selecting proper range.
            textRange.moveStart("character", 0);
            textRange.moveEnd("character", 0);

    These will remove the selection before it scrolls the input viewport.

    Let me know if this helps.

    All the best,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Misty Fowler
    Misty Fowler avatar
    2 posts
    Member since:
    Jan 2010

    Posted 07 Oct 2010 Link to this post

    Yes, this is exactly what I needed. Thanks much!
Back to Top