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

IE 11 not rendering RadButton BackColor or as transparent

3 Answers 147 Views

Button

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

3 Answers, 1 is accepted

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>

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

<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.

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);

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>

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

<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.