Icon is not visible until mouse hovers

3 posts, 0 answers
  1. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 01 Apr 2013 Link to this post

    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. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 01 Apr 2013 Link to this post

    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? 

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 02 Apr 2013 Link to this post

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