This is a migrated thread and some comments may be shown as answers.

rcbArrowCell FireFox and Safari Issue

1 Answer 85 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Sa_MMM asked on 09 Dec 2010, 09:29 AM

VS 2008
Telerik 2010.2.713.35

.rcbArrowCell {background-image: none !important;} works great in IE, but in FF and Safari, the image only partly disappears (a thin vertical line remains). How can I make it invisible in FF and Safari?

Example below:

Page:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style id="ThemeCSS" runat="server" type="text/css">

</style>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="Scriptmanager1" runat="server">

</asp:ScriptManager>

<div>

<asp:Table ID="Table1" runat="server">

<asp:TableRow ID="TableRow1" runat="server">

<asp:TableCell ID="TableCell1" runat="server" BackColor="Red" Width="200px">

<telerik:RadComboBox ID="RadComboBox1" runat="server">

</telerik:RadComboBox>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</div>

</form>

</body>

</html>

Code:

Imports Telerik.Web.UI

Partial Class _Default

Inherits System.Web.UI.Page

Private Sub DisableArrow(ByVal cbo As RadComboBox)

Dim cboID As String = "#" + cbo.ClientID

Dim ltrl As New LiteralControl()

ltrl.ID = "HideArrowCSS"

ltrl.Text = cboID + " .rcbArrowCell {background-image: none !important; border: 0; padding: 0; width: 0px; background-color: Transparent;} "

ThemeCSS.Controls.Add(ltrl)

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

RadComboBox1.Height = 0

RadComboBox1.Width = 0

DisableArrow(RadComboBox1)

End Sub

End Class

1 Answer, 1 is accepted

answered on 11 Dec 2010, 07:25 AM

Telerik's awesome support solved it:

Thank you for contacting us.

There is a special property of RadComboBox to hide the arrow - just set ShowToggleImage="false". You can test it in RadComboBox Configurator example.

However from what I'm seeing in your screenshot - you want to hide the whole background, not just the arrow. You can do that by removing the background images from both cells in RadComboBox's table element, like this:
.rcbInputCell, .rcbArrowCell {background-image: none !important;}

Let me know if this information helps.

Best wishes,
Kamen Bundev
the Telerik team