[Solved] Icon is not visible until mouse hovers

[Andrew]

I have a problem with my link button images.

When the page first comes up, the button displays with no icon.

I move the cursor over the button, and then the icon becomes visible, and remains visible even after I've moved the cursor away.

Here's how I'm creating the buttons.

<telerik:RadButton ID="_btnEdit" runat="server" Text="Change Settings..."
                EnableBrowserButtonStyle="true"
                ButtonType="LinkButton"
                Height="32px"
                >
            <Icon PrimaryIconUrl="~/Images/Edit_16.png" PrimaryIconTop="8" PrimaryIconRight="8" PrimaryIconWidth="32" PrimaryIconHeight="32" />
 </telerik:RadButton>

The bug becomes obvious if you use the Chrome developer tools and see what's actually being rendered.

The image URL is set as "%26#39;/CMS/Images/Edit_16.png"

<span id="ctl00_Main__btnEdit" class="RadButton RadButton_Windows7 rbLinkButton" style="display:inline-block;height:32px;line-height:32px;height:32px;"><span class="rbPrimaryIcon" style="top:8px;right:8px;width:32px;height:32px;background-image:url(%26#39;/CMS/Images/Edit_16.png');"></span><span class="rbText rbPrimary">Change Settings...</span><input id="ctl00_Main__btnEdit_ClientState" name="ctl00_Main__btnEdit_ClientState" type="hidden" autocomplete="off"></span>

Once I move the mouse over the button, the rendering changes to display the correct image URL.

<span id="ctl00_Main__btnEdit" class="RadButton RadButton_Windows7 rbLinkButton" style="display:inline-block;height:32px;line-height:32px;height:32px;"><span class="rbPrimaryIcon" style="top: 8px; right: 8px; width: 32px; height: 32px; background-image: url(http://cms.datmedia.com.au/CMS/Images/Edit_16.png);"></span><span class="rbText rbPrimary">Change Settings...</span><input id="ctl00_Main__btnEdit_ClientState" name="ctl00_Main__btnEdit_ClientState" type="hidden" autocomplete="off"></span>

This was working fine. The problem seemed to occur once I wrote my own login code:this line of code in when the user logs in:

if (Membership.ValidateUser(model.UserName, model.Password))
{
    FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);

Here is a similar post where somehow cookies interfere with the button images: http://www.telerik.com/community/forums/aspnet-ajax/button/radbutton-with-image-not-showing.aspx

[Andrew]

Here's the workaround I applied:

At the bottom of the Master page I added this piece of javascript:

<script type="text/javascript">
    $(function () {
        if ($telerik.findButton) {
            $('.RadButton').each(function (index, elem) {
                var elemId = elem.id;
                var button = $telerik.findButton(elemId);
                if (button && button.get_primaryIconElement && button._iconData) {
                    var primaryIconUrl = button._iconData.primaryIconUrl;
                    var primaryIconElement = button.get_primaryIconElement();
                    $(primaryIconElement).css('background-image', "url(" + primaryIconUrl + ")");
                }
            });
        };
    });
</script>

I'm nonetheless intrigued as to why I need to do this. Why would adding a login cookie change the setting of button icons? 

[Danail Vasilev]

Hello Andrew,

There used to be an issue with the RadButton when it is used as an image button and the website that contains it, is configured to use a cookieless sessionState. This issue has already been fixed and you can check its status here.

I have tried to reproduce the issue with the latest official version (2013.1.220) of RadControls but to no avail. You can watch a short video with the test here, and then notify me if I am missing something.

Could you confirm that you are using the latest version of RadControls, and if not, does upgrading to the latest one resolves your issue? This blog will guide you on how to do the upgrade.

If the above step, however, does not help, could you please try to reproduce the issue with the VS sample I have attached and then tell us what changes you have made, so that we can make an investigation locally? Note that I have used a standard ASP.NET Web Application for the test and the database files have been removed, in order to decrease the size of the attachment.

All the best,
Danail Vasilev
the Telerik team

[peng li]

It is Apr. 30, 2021 now. The same problem customize icon button is still happening to me on the version 2020.3.915.45. So hard to fix?