Dropsown arrows are shown twice

[Atit Thaker]

Hi,

I am using RadCombobox and in Google chrome and firefox, the arrows are shown twice for the dropdown. I have attached image and below is the code which generates the RadCombobox.

<div style="float: right; ">
<asp:Label ID="lblQuickNavigation" runat="server" Text="Quick Navigation: "></asp:Label>
<telerik:RadComboBox runat="server" ID="rcbQuickNavigation" SkinID="DropDownList300" Filter="Contains" OnSelectedIndexChanged="rcbQuickNavigation_SelectedIndexChanged" AutoPostBack="true" ExpandAnimation-Type="OutElastic" ExpandAnimation-Duration="500" CollapseAnimation-Type="InElastic" CollapseAnimation-Duration="500">
</telerik:RadComboBox>
</div>

 
The style comes from Skin file which has definition like below.

<telerik:RadComboBox runat="server" width="290px" DropDownWidth="300px"  Height="200px" SkinId="DropDownList300"></telerik:RadComboBox>

Can you please help me with this. The combo is coming fine with IE.

[Kalina]

Hello Atit Thaker,

As I understand from your explanations - you are using a custom RadComboBox Skin.
Please set the EnabledEmbeddedSkins property to "false" as is described at the "Creating a Custom Skin" online tutorial.
I hope this helps.

All the best,
Kalina
the Telerik team

[Atit Thaker]

Setting EnabledEmbeddedSkins to "false" did not work. It still shows 2 arrows in chrome and firefox.

Also, I have used custom skin for other dropdowns as well on the page.. But they does not show 2 arrows like this specific dropdown in place.

Could there be some other reason? Or do you need any more details from me?

[Kalina]

Hello Atit Thaker,

Does the RadComboBox still display arrows twice if you remove the custom skin?
Are there any “inline” styles applied to the control? (As I can see it is nested within a container).
Could you please send us a live URL where we can observe the issue?

Regards,
Kalina
the Telerik team

[Atit Thaker]

Here is the URL.

http://schoolsonlineweb.live2.dev.radixweb.net


See the dropdown on top right corner labeled quick navigation. It is coming correctly for IE but not in FF or Chrome.

I tried removing custom skin but it did not help. In my skin, there is no stylesheet. All I do is set Heigh, Width and Dropdownwidth. You can see the skin below in my first post.

Thanks
Atit

[Kalina]

Hello Atit Thaker,

I used the FireBug add-on for FireFox to inspect the CSS styles applied to your page.
The reason for this issue to appear is the " .crumb_bg a" style located in BRS.css file.

.crumb_bg a
{
 color:#103D73;
 margin:0;
 padding:0 10px;
 text-decoration:underline;
}

If I remove "padding:0 10px;" attribute - RadComboBox starts to display arrows properly.
So, my advice is to consider changing this CSS style.

All the best,
Kalina
the Telerik team

[Atit Thaker]

Hi Kalina,

Thanks. That worked for me. I removed the padding and it worked perfectly with google chrome and Firefox.

Thanks
Atit