IE 11 not rendering RadButton BackColor or as transparent

4 posts, 0 answers
  1. Mark
    Mark avatar
    4 posts
    Member since:
    Aug 2014

    Posted 26 Apr Link to this post

    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;

     

     

  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 29 Apr Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    4 posts
    Member since:
    Aug 2014

    Posted 29 Apr in reply to Misho Link to this post

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

     

  5. Misho
    Admin
    Misho avatar
    129 posts

    Posted 02 May Link to this post

    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.
Back to Top