RadComboBox w/ItemTemplate "scrunched" on first expand when forced to expand upwards in IE

[Thad]

I have a very nice multi-select radcombobox solution that uses a RadListBox inside of the first RadComboBoxItem's ItemTemplate that allows for keyboard support and extra properties to return the values of the selected.  There is also a footer template that is added in non-production environments to show the developer/tester the values of the checked items.

However, the testers have noticed that when the server control is right above the status bar like in the attached "scrunched.png" the control only expands up the height of one row when the dropdown is clicked on.  If you close the dropdown and expand it upwards again it expands to full height, like in the attached "justright.png"...

This is only for IE7/IE8.  Firefox 3.6.3 and Chrome 8.0.552 work fine.  Well, I say they work fine only because they don't care about screen boundaries so those browsers expand the dropdown, um, downwards, not upwards like IE "tries" to do...  Not the optimal situation for UI friendliness, but at least they don't create more problems by trying to be "friendly".

Any suggestions?
Thanks!!

[Kalina]

Hi Thad,

This issue is strange indeed.
Could you please send us a live URL where we will be able to observe it?
Additionally we will need to inspect your implementation – can you provide us a simplified runnable page that reproduces the issue?
Thank you in advance.

Best wishes,
Kalina
the Telerik team

[Thad]

Kalina,

Unfortunately the error doesn't appear when I move it to a clean solution, so the problem exists somewhere within our solution.  Looks like I'll just have to dig a bit more.

If I find the reason for this problem I'll post again so others can learn from my mistakes!  :-)

Thanks!
Thad

[Thad]

Kalina,

Since this problem is related to some CSS or JS that is in our solution, we came up with this fix / hack.

1. Add a second hidden input control to the ItemTemplate to store whether or not the RadComboBox has been opened.
2. Attach the following JavaScriptEvent to the OnClientSideDropDownOpening event.  If the RadComboBox is opening for the first time we call the showDropDown() method kind of to force the "second open experience".  Not checking to see if this code had already ran by using the hidden input control caused infinite recursion and stack overflow errors.

function multiSelect_RadComboBox_Opening(sender, event) {
    /// <summary>When the RadComboBox is opening, this forces an additional open for IE that fixes the "scrunched" effect when the control is at the bottom of the scrollarea.</summary>
    /// <param name="sender" type="object">A MSAjax reference to the RadComboBox</param>
    /// <param name="event" type="object">A custom Telerik event object</param>

    // The problem only occurs in IE.
    if ($.browser.msie) {
        if (sender.get_items) {
            var items = sender.get_items();
            if (items.get_count && items.get_count() > 0) {
                var rlbItems = items.getItem(0).findControl('rlbItems');
                var hdnHasBeenExpandedClientId = rlbItems.get_id().replaceAll('_rlbItems', '_hdnHasBeenExpanded');
                var hdnHasBeenExpanded = $('#' + hdnHasBeenExpandedClientId);

                if (hdnHasBeenExpanded.length > 0) {
                    if (hdnHasBeenExpanded.val() == '') {
                        // Set the value of the hidden input control to anything other than ''.
                        // This keeps the call to showDropDown from recursing infinitely into a stack overflow.
                        hdnHasBeenExpanded.val('1');

                        // This call does a forced show of the RadComboBox, which fixes the "scrunched" effect.
                        sender.showDropDown();
                    }
                }
            }
        }
    }
}

Hopefully this helps others!
Thad