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

IE 11 not rendering RadButton BackColor or as transparent

3 Answers 111 Views
Button
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 26 Apr 2016, 10:36 PM

I'm using a RadButton and trying to get the button background to transparent. I am using an image on the button. In Chrome it displays as expected but in IE 11 it does not display properly. I am using Telerik version 2014.1.225.40.

 

.rbClearButton
{
    background-color: transparent !important;
    border: none !important;
    color: #000 !important; /* optional, depending on the background */
}

RadButton rb = new RadButton();
rb.Icon.PrimaryIconUrl = "~/Styles/images/alarm_red.png";
rb.ToolTip = "Alarm";
rb.CssClass = "rbClearButton";
//rb.BackColor = Color.Yellow;

 

 

3 Answers, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 29 Apr 2016, 08:31 AM
Hi,

I was not able to replicate the unwanted behavior or RadButton using a transparent background on my side.

Here is a video showing my tests and the configuration that you can use to achieve the desired behavior:


<!DOCTYPE html>
 
<head runat="server">
    <title></title>
 
   <style type="text/css">
       body {
        
       background-color: aliceblue;
       }
 
        .rbClearButton {
            background-color: transparent !important;
            border: none !important;
            color: #000 !important; /* optional, depending on the background */
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
         
 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadSkinManager ID="rskm1" runat="server" ShowChooser="true"></telerik:RadSkinManager><br /><br />
        <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload" CssClass="rbClearButton">
            <Icon PrimaryIconCssClass="rbRefresh" />
        </telerik:RadButton>
 
 
    </form>
</body>
</html>

http://screencast.com/t/BFYtzjjR

I hope that helps.

Regards,
Misho
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Mark
Top achievements
Rank 1
answered on 29 Apr 2016, 11:17 PM

This is code I am maintaining so I am not using aspx but instead C#.

After getting frustrated with it I removed the css and instead setting the button style directly. This is the code I ended up using.

RadButton rb = new RadButton();
rb.Text = "";
rb.Icon.PrimaryIconUrl = "~/Styles/images/alarm_red.png";
rb.ToolTip = "Alarm";
rb.BackColor = Color.Transparent;
rb.BorderStyle = BorderStyle.None;
 
// icon is 16x16
rb.Icon.PrimaryIconLeft = Unit.Pixel(4);
 
if (browserName.Equals("InternetExplorer") || browserName.Equals("IE"))
{
    rb.ButtonType = RadButtonType.SkinnedButton;
    rb.Height = Unit.Pixel(19);
    rb.Width = Unit.Pixel(0);
    rb.Icon.PrimaryIconTop = Unit.Pixel(3);            
}
else
{
    rb.Icon.PrimaryIconTop = Unit.Pixel(1);
    rb.Width = Unit.Pixel(18);
}
 
rb.AutoPostBack = false;
rb.OnClientClicked = "clickedTreeAlarmButton";
rb.CommandName = "alarmClick";
rb.DataBinding += new EventHandler(rb_DataBinding);

 

0
Misho
Telerik team
answered on 02 May 2016, 09:55 AM
Hi,

Here is a sample that is showing an approach for setting the background of RadButton as transparent and markup that is similar to yours:

<!DOCTYPE html>
 
<head runat="server">
    <title></title>
 
    <style type="text/css">
       body {
         
       background-color: aliceblue;
       }
  
       .rbClearButton {
            background-color: transparent !important;
            border: none !important;
            color: #000 !important; /* optional, depending on the background */
            background-image: none !important;
        }
 
    </style>
 
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:Panel runat="server" ID="Panel1"></asp:Panel>
        <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload" CssClass="rbClearButton">
            <Icon PrimaryIconCssClass="rbRefresh" />
        </telerik:RadButton>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                RadButton rb = new RadButton();
                rb.Text = "";
                rb.Icon.PrimaryIconUrl = "~/Button/ePlayer.png";
                rb.ToolTip = "Alarm";
                rb.BackColor = System.Drawing.Color.Transparent;
                rb.BorderStyle = BorderStyle.None;
                rb.CssClass = "rbClearButton";
                // icon is 16x16
                rb.Icon.PrimaryIconLeft = Unit.Pixel(4);
                rb.ButtonType = RadButtonType.SkinnedButton;
                rb.Height = Unit.Pixel(19);
                rb.Width = Unit.Pixel(50);
                rb.Icon.PrimaryIconTop = Unit.Pixel(3);
                rb.AutoPostBack = false;
                rb.CommandName = "alarmClick";
                Panel1.Controls.Add(rb);
            }
        </script>
    </form>
</body>
</html>

I hope that helps.

Regards,
Misho
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Button
Asked by
Mark
Top achievements
Rank 1
Answers by
Misho
Telerik team
Mark
Top achievements
Rank 1
Share this question
or