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

Icon is not visible until mouse hovers

2 Answers 154 Views
Button
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Iron
Iron
Andrew asked on 01 Apr 2013, 11:38 PM
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



2 Answers, 1 is accepted

Sort by
0
Andrew
Top achievements
Rank 1
Iron
Iron
answered on 02 Apr 2013, 03:21 AM
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? 

0
Danail Vasilev
Telerik team
answered on 02 Apr 2013, 04:10 PM
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
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.
peng li
Top achievements
Rank 1
commented on 30 Apr 2021, 07:56 PM

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?
Tags
Button
Asked by
Andrew
Top achievements
Rank 1
Iron
Iron
Answers by
Andrew
Top achievements
Rank 1
Iron
Iron
Danail Vasilev
Telerik team
Share this question
or