how to avoid horizontal scroll bar

[Naga]

I have a question on horizontal scroll in drop down list.

How can I set the dropdown width automatically based on the length of the item.

Basically I want to avoid horizontal scroll bar when any item’s length is longer than input area.
i am using  " DropDownWidth " property with maximum values but still i am getting horizontal scroll bar.

i would really appreciate your help.

Thanks much , Naga

[Shinu]

Hi Naga,

I tried following client side code for accomplishing the functionality of resizing the dropdown width according to the menuitem.

JavaScript:

<script type="text/javascript">
function setwidth()
{
    var i =0, length=0;
    var combo = $find("<%= RadComboBox1.ClientID %>");
    items = combo.get_items();
    for (i=0; i< items.get_count(); i++)
    {
        var comboItem = items.getItem(i);
        if(comboItem.get_text().length>length)
        {
            length = comboItem.get_text().length;
        }
    }
    var setwidth = length *7;
    combo._dropDownWidth= setwidth;
}

And here's the ASPX:

<telerik:radcombobox id="RadComboBox1" runat="server" EnableScreenBoundaryDetection="False" OnClientDropDownOpening="setwidth">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1"></telerik:RadComboBoxItem>
        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2"></telerik:RadComboBoxItem>
        <telerik:RadComboBoxItem runat="server" Text="This_Is_Extremely_Long_RadMenuItem" Value="This is extremely long RadMenuItem"></telerik:RadComboBoxItem>
    </Items>
</telerik:radcombobox>

Thanks,
Shinu.

[Alex Gyoshev]

Hi Naga,

The following CSS should do the trick:
div.RadComboBoxDropDown .rcbScroll
{
    overflow-x: hidden;
}

Sincerely yours,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[karen healey]

Hi Admin,

That CSS trick didn't work for me. However I did get the horizontal scroll bar to stop showing by deleting the DropDownWidth value. So basically I can't both 1) control the dropdown width, and 2) avoid a horizontal scrollbar. Argh.

[Ian]

Try !important.  i.e.

div.RadComboBoxDropDown .rcbScroll
{
    overflow-x:hidden !important;
}

This worked for me.

[Steve]

Doing that prevents BOTH horizontal and vertical scroll bars from displaying.  What if you need the vertical (fairly typical i would think) but do NOT need the horizontal?