Set RadListBox Max Height

[Thad]

Hello,

As do many, I use a RadListBox inside of a RadComboBox's ItemTemplate to implement multiple selections.

One thing I want to provide is a maximum height of the RadListBox, similar to a RadComboBox.

Purpose:
For site-wide consistency, at max the RadListBox can be 170px high.  If there are fewer rows than fill up the space, then the height should be automatic.

I'm not setting a height on the RadComboBox and/or RadListBox so that they render in their unaltered size.  In the RadComboBox OnClientOpened event, I capture the size of the rcbSlide, which is the only element that I see that holds the actual height of the dropdown when it's expanded.  If the value is greater than 170px then we need to limit the height by resizing the RadListBox and the rcbSlide.  (I tried OnClientOpening, but the height hasn't been set at that point...)

Here is the JavaScript that I have so far.   At this point it's setting the height of the dropdown, but the overflow scrollbars do not appear on the RadListBox as I'd expect...

function multiSelect_RadComboBox_Opened(sender) {
    var height = sender.get_dropDownElement().parentElement.style.height;
    if (height.length > 0) {
        height = height.substring(0, height.length - 2);
        if (height > 170) {
            sender.get_dropDownElement().parentElement.style.height = '170px';
            var items = sender.get_items();
            items.getItem(0).findControl('rlbItems').get_element().style.height = '170px';
        }
    }
}

Thoughts??
Thanks!
Thad

[Thad]

Dang,

I hate it when I figure things out right after posting.  I suppose this is because writing a post makes me think from all angles so I don't sound too ignorant!  :)

Anyway, here is the JavaScript that works for me - documented for the archives.  I basically just had to target the inner div with class rlbGroup to and reset the overflow property to auto after resizing it in order for the div to be clued in that I was interested in seeing the scroll bars. 

function multiSelect_RadComboBox_Opened(sender) {
    /// <summary>When a RadComboBox is opened, limit the dropdownheight to 170px.</summary>

    // will return a string like 123px
    var height = sender.get_dropDownElement().parentNode.style.height;

    if (height.length > 0) {

        // remove the px
        height = height.substring(0, height.length - 2);

        if (height > 170) {
            // Find the RadListBox inside of the RadComboBox ItemTemplate
            var rlbGroup = sender.get_items().getItem(0).findControl('rlbItems').get_element().children[0];

            // Set the height and overflow styles on the inner div with class rlbGroup
            rlbGroup.style.height = '170px';
            rlbGroup.style.overflow = 'auto';
        }
    }
}

I've added a screen shot showing it working. Happy times!