RadButton (Link ButtonType) does not have transparent backcolor. (In latest Telerik AJAX version 2012 Q3)

13 posts, 1 answers
  1. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 17 Oct 2012 Link to this post

    I have just updated my Telerik AJAX from 2012 Q2 To 2012 Q3 recently.
    I found out that the RadButton, when set to Link ButtonType, unlike the previous version, it does not have transparency background. Is there anyway to fix it?

    Attached, please find following pic:
    * "Before.png" picture, which show the RadButton (Link ButtonType) in 2012 Q2 Version.
    * "After.png" picture, which shown the RadButton (Link ButtonType) in 2013 Q3 Version.

    Thanks

    Lamk
  2. Adrian
    Adrian avatar
    14 posts
    Member since:
    Apr 2010

    Posted 18 Oct 2012 Link to this post

    Same issue here. Also ForeColor has been changed.

    Please provide a style Fix.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 19 Oct 2012 Link to this post

    Hello,

    With Q3 we have improved LinkButtons styling in order to match our other input controls.  In your case, the most proper solution is to create a CSS class which you could add tot he link buttons that you don`t like to have border and/or background color:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .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>


    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Adrian
    Adrian avatar
    14 posts
    Member since:
    Apr 2010

    Posted 19 Oct 2012 Link to this post

    Wow, have to manually change 3000 RadButtons in my Project. Thanks Telerik.
  6. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 19 Oct 2012 Link to this post

    I tried what you suggested and I can see that the background now is transparent, but then the hover effect of that RadButton is gone. If a link button has no hover effect, it may make user think that it is just a label text .

    Thanks

    Lamk.
  7. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 19 Oct 2012 Link to this post

    Hi,

    Lamk, you could just add a few hover styles and make the the button to behave as you like it:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .rbClearButton,
            .rbClearButton:hover {
                background-color: transparent !important;
                border: none !important;
                color: #000 !important; /* optional, depending on the background */
            }
             
            .rbClearButton:hover {
                border: none !important;
                color: #555 !important; /* optional, depending on the background */
                opacity: .7;
            }
        </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>


    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 19 Oct 2012 Link to this post

    Hello Adrian,

    I made a compare between Default skin button type link button from Service Pack 2, Q2 2012, and Q3 2012.

    You could check the attached link-button-compare.gif for more details. As you could see in both versions the buttons have border and background color. In the current version the background colors for normal and hover state are improved to match more accurate the the specific embedded theme and to look consistent with other input Telerik`s controls such as RadFormDecorator.

    Would you be more specific what is the issue you are facing with the latest version of the controls and why you have to change manually more than 3000 RadButtons?

    As I mentioned above the only change in that case is the color scheme improvement. If you have some specific custom CSS code that does not work already, most probably it is form the specificity of the CSS selectors in the current versions which increased with one more CSS class. If in a previous version the base style was something like that:

    .rbLinkButton {color: red;}

    to override it you should add more specificity to the selector:
    a.rbLinkButton {color: Blue;}

    Now the base selector became heavier:

    .RadButton.rbLinkButton {color: Red;}
     
    so, to override it you should add more specificity in the following way:
    a.RadButton.rbLinkButton {color: Blue;}

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 19 Oct 2012 Link to this post

    I have tried your CSS, however, it is not as good as the previous version.

    Attached, please take a look at:
    Before.jpg :     Hover style in 2012 Q2
    After.jpg:         Hover style in 2012 Q3, (after applied CSS)

    My client have been get used to this Link Button style and I don't want to make any change to it. Is it possible that you can have an option for the link button to go back to the style of 2012 Q2 and backward? If this change in 2012 Q3 will be persisted as standard for next upcoming Telerik AJAX version and onward, I may have no choice but stick with 2012 Q2 forever.

    Thanks

    Lamk.
  10. Adrian
    Adrian avatar
    14 posts
    Member since:
    Apr 2010

    Posted 22 Oct 2012 Link to this post

    <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Reload"
        CssClass="rbClearButton">

    If I have to add CssClass="rbClearButton" since means to me tons of changes.
  11. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 22 Oct 2012 Link to this post

    Hello Lamk,

    In my previous post you you I have provided a screenshot comparing link buttons form Q2 and Q3 without any CSS fixes applied. The difference comes from the fact that a visual improvement was applied to all link buttons in order to match correctly the color schemes of Themes they belong.

    This what you wrote in your first post:

    I found out that the RadButton, when set to Link ButtonType, unlike the previous version, it does not have transparency background. Is there anyway to fix it?

    So, if I understand correctly, you want the button in normal state to have transparency and the hover state to use the background color from Q2 version? If this is so, here is the authentic colors from the previous version:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            a.RadButton.RadButton_Default.rbLinkButton {
                background-color: transparent;
                border: 1px solid #666;
                color: #333;
            }
             
            a.RadButton.RadButton_Default.rbLinkButton:hover {
                background-color: #c5c5c5;
                color: #333;
            }
             
        </style>
    </head>
    <body style="background: #eee;">
        <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">
            <Icon PrimaryIconCssClass="rbRefresh" />
        </telerik:RadButton>
        </form>
    </body>
    </html>

    Note that, I am using default skin to for my example as you didn`t specified the Skin you are using. For your convenience, attached is Button.Default_Q2_12.zip containing RadButton default skin from the previous version.

    As for your question:

    Is it possible that you can have an option for the link button to go back to the style of 2012 Q2 and backward?

    It is not possible to be done, as it is a solution on a global level for all controls (color improvements) and with the provided fix above you could use the Q3 version and to have the style for LinkButton from the previous one. Also it is always an option to create RadButton Custom Skin.

    Greetings,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 22 Oct 2012 Link to this post

    Hi Adrian,

    I understand that if you have to add the CSS class that means a lot of changes. I would like to ask you to explain in details what is the issue you are experiencing? If it is the color scheme change you could check my last reply to Lamk, that provides the styles before the change. If it works for you, you could use the same styles in order to globally override the current link button styles without the necessity to use the CssClass property.

    If you don`t use the Default skin, you should use the same cascade, but with the preferred skin in the name, if it is Black:

    <style type="text/css">
            a.RadButton.RadButton_Black.rbLinkButton {
                border: 1px solid #666;
                        background-color: #2e2e2e;
                        color: #fff;
                        text-decoration: none;
            }
             
            a.RadButton.RadButton_Black.rbLinkButton:hover {
                background-color: #4f4f4f;
                        color: #9EDA29;
            }
             
        </style>

    Put the styles in a separate stylesheet and link it to your project.

    All the best,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 22 Feb 2013 Link to this post

    The fix provided by Bozhidar does not work anymore after I upgraded to version 2013 Q1.

    Thanks

    Lamk
  14. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 25 Feb 2013 Link to this post

    Hi,

    Since Q1 2013 a Breaking change was introduced for RadButton control and its rendering in order to pass HTML5 Validation: [Breaking Change] Since Q1 2013 RadButton's rendering is HTML5 compliant

    In your case, you have to change the CSS in the following way:

    span.RadButton.RadButton_Black.rbLinkButton {
                border: 1px solid #666;
                        background-color: #2e2e2e;
                        color: #fff;
                        text-decoration: none;
     }
              
    span.RadButton.RadButton_Black.rbLinkButton:hover {
                background-color: #4f4f4f;
                        color: #9EDA29;
    }


    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017