ComboBox Scrollbar

[Alan]

Hello

    I am using the  ASP.Net AJAX controls version 2008.2.1001.20

   I have problem usign the combobox ,Scroll bar for the dropdown of the comboBox is not as the same in the browser scrollbar, for all the skins it shows the scroll bar in gray color.

Earliest reply is appreciated

 Thank you

[Atanas Korchev]

Hi Mark Leeds,

In Internet Explorer we have styled the scrollbar to look more consistent with the appearance of RadComboBox. If you want to disable it you should edit the CSS file used by your skin and remove this CSS rule:

.RadComboBoxDropDown_<SkinName> .rcbScroll
{
    scrollbar-face-color: #e9e9e9;
    scrollbar-highlight-color: #ffffff;
    scrollbar-shadow-color: #e9e9e9;
    scrollbar-3dlight-color: #dbdbdb;
    scrollbar-arrow-color: #787878;
    scrollbar-track-color: #f5f5f5;
    scrollbar-darkshadow-color: #aeaeae;
}

This help topic demonstrates how to customize an existing skin.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jose]

Hi Mark.

I would check two things:

1. Check if you are using an embeded skin. If you are, make sure your combobox is set to EnableEmbeddedSkins="true". If you are not using embeded skins, then EnableEmbeddedSkins should be "false" and verify that you're CSS file handles the scrollbar (as the sample by Albert).
2. If you are using a RadFormDecorator, make sure comboboxes are in the list of selected controls to be decorated.

Hope this could help.

Jose Guay

[Alan]

Hi Albert

 Thanks for your reply.
 I have removed the css rule in the css file as you mentioned .

 I included the css file as in the below line in my page.

<link href="../RadControls/Combobox/Skins/WebBlue/ComboBox.WebBlue.css" rel="stylesheet" type="text/css" />

 I have used the follwoing code for declaring the comboBox

<telerik:RadComboBox ID="DateRangeNextRadCombo" runat="server" Skin="WebBlue" AutoPostBack="true" EnableEmbeddedSkins="false
  OnClientSelectedIndexChanging="DateSelectedIndexChange" Width="140px" OnSelectedIndexChanged="IndexChanged"  Font-Size="11px" Height="200px">

  I still face the same problem (Scroll bar for the dropdown of the comboBox is not as the same in the browser scrollbar, for all the skins it shows the scroll bar in gray color)

  Regards
  Mark.

[Jose]

I see in you radcombo declaration that the parameter EnabledEmbededSkins is missing a closing quote.

[Alan]

Hi,

  Still I am facing the same problem after having the quotes closed in the declaration.

Thank you

[Simon]

Hello Mark Leeds,

Is it possible that you have some additional CSS used in your page, that might be defining the scrollbar appearance as well? Can you verify that?

Additionally, it will probably help if you can provide a screenshot of the scrollbar's odd appearance.

Thank you in advance.

Greetings,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Clive Hoggar]

Hi

I think my problem is related to this discussion but I am not sure about the solution...

The website master page has a form decorator with Black skin, but there are certain
pages on which the default skin renders some elements better due to the page background,
so I have explicitly set the skin for those elements separately.

A combo box with skin explicitly set to default renders with grey scrollbar in Firefox (as I intended)
but in IE7 it renders them black.

I still want the overall page to use the black skin, although it would not be  disaster if the main scrollbars,
were grey if this is the only possibility to get consistency.

What do you suggest?

thanks

Clive

[Simon]

Hello Clive Hoggar,

RadFormDecorator stylizes the scrollbars on the page and since RadComboBox does not do so, its scrollbars inherit the styles of the Decorator.

You could avoid this by explicitly specifying the Decorated Zone of the RFD to be an element in the <form> element. This will resolve the issue because the drop down is detached when opened and the scrollbar styles will not be applied.

Below is a sample code:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Black" DecorationZoneID="formContainer" />
    <div id="formContainer">
        <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="50px" Skin="Default">
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="1" />
                <telerik:RadComboBoxItem runat="server" Text="2" />
                <telerik:RadComboBoxItem runat="server" Text="3" />
                <telerik:RadComboBoxItem runat="server" Text="4" />
                <telerik:RadComboBoxItem runat="server" Text="5" />
            </Items>
        </telerik:RadComboBox>
    </div>
</form>

Please let me know if you need further guidance with this.

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.