RadButton with image not showing

[sean]

Hi,

is there known problem of radbutton not showing image until hover is off with IE9?

I have RadButton in one page where is also RadEditor:

<telerik:RadButton ID="ibtnSave" runat="server" CausesValidation="false" Width="43px" Height="43px" Text="<%$ Resources:ibtnSave %>" UseSubmitBehavior="false">

<Image ImageUrl="images/save.gif" EnableImageButton="true" />

</telerik:RadButton>

When I go to the page the button is there but the image is not showing. When you go over the button with mouse and go off then image turns visible.

[Slav]

Hi Seppo,

The answers of the following questions will be useful for determining the cause of the problem:

Are you using any custom styles that are affecting the RadButton appearance? If you are, please try removing them and check if the examined behavior persists. Is the background image still missing when the RadButton is placed on a clean page? Are you viewing the page in Compatibility mode?

Note that currently I am mostly guessing as to what your setup is. If you are still having difficulties, please open a support ticket and send a simple, runnable page that isolates the issue so that I can examine it locally and suggest an according solution.

Greetings,
Slav
the Telerik team

[sean]

This problem is now solved.

I used cookieless forms authentication in my project so I couldn't use this: ImageUrl="images/save.gif"
because then the button tried to get image from address like this jNJLYm74izyOJK8GWdfoebgePJTEws0Pci7fHgTOUFTJe9jvgA2))/images/save.gif where the image wasn't.

Instead I had to use it like this: ImageUrl="/images/save.gif"

The weird thing is that why image appeared when I hovered out from the image.

[Slav]

Hello Seppo,

This is a bug in the RadButton control that occurs as a result of the brackets in the path to the background image (which is valid for a cookieless session). The issue is brought to the attention of our developers, although I cannot provide a firm estimate when a fix will be available. You can track the status of the problem in PITS via this link.

For the time being you can workaround this issue by setting the background image on the client-side when the control is loaded. The following code sample show how to achieve this:

<script type="text/javascript">
    function OnClientLoad(sender, args) { // RadButton OnClientLoad client-side event handler
        var imageData = sender.get_imageData();
        sender._setBackgroundImage(sender.get_element(), imageData.imageUrl);
    }
</script>

Feel free to contact us again if you encounter additional difficulties.

Kind regards,
Slav
the Telerik team

[Brian]

I too am seeing the same error.

I am not using cookieless sessions, however am I using .Net 4.5 and am integrating Forms Authentication with WS-Federation Authentication.

When I view source on the page, the html renders as such:

<a id="ctl00_ContentPlaceHolder1_searchRadButton" tabindex="5" class="RadButton&#32;RadButton_Default&#32;rbSkinnedButton" href="javascript:void(0)">
    <span class="rbPrimaryIcon" style="background-image:url(%26#39;Images/Icons/Magnifier2.png&#39;);"></span>
    <input class="rbDecorated&#32;rbPrimary" type="submit" name="ctl00$ContentPlaceHolder1$searchRadButton_input" id="ctl00_ContentPlaceHolder1_searchRadButton_input" value="Search" />
    <input id="ctl00_ContentPlaceHolder1_searchRadButton_ClientState" name="ctl00_ContentPlaceHolder1_searchRadButton_ClientState" type="hidden" />
</a>

The problem seems to be the style tag in the primary icon span.  style="background-image:url(%26#39;/Images/Icons/Magnifier2.png&#39;);

The %26 should be &, which would give you &#39; which equates to a single quote (valid).


If I hover on the button and then hover off, the image displays properly.


I am currently using version 2012.2.912.40

[Slav]

Hi Brian,

Indeed, the URL of the icon image is rendered in single quotes as you have mentioned. The way it was encoded, however, is strange and most probably causes the problem. Have you explicitly HTML encoded the button rendering to achieve this output and to what purpose?

If you have not performed this encoding and you are not aware what in your project could be causing it, please open a support ticket and send a simple, fully runnable page that isolates your case so that I can inspect it locally and provide a more to the point answer.

Regards,
Slav
the Telerik team

[Brian]

I have not encoded it as far as I am aware.  It is a hard coded link in the markup for the rad button:

<telerik:RadButton ID="searchRadButton" runat="server" Text="Search" Skin="Default"
    OnClick="searchRadButton_Click" TabIndex="5">
        <Icon PrimaryIconUrl="~/Images/Icons/Magnifier2.png" />
</telerik:RadButton>

I will open a support ticket also.

[TonyG]

I don't know if this is related and I'm sorry if it's not. I came to this thread looking to see if anyone else was noticing buttons missing.

I just upgraded to v2.918 (internal). I have a form where the user can't see the button image but they can mouse over and activate it. This is purely a rendering  issue. Using Firebug (FFv15.0.1) we're seeing the WebResource call from the style is failing for that specific session:

.rbSplitLeft {

    background-image: url("/WebResource.axd?d=zzzzzz&t=111111111");

The failed call is on a PC in the same office with IIS, where the URL to the site is going resolving from the internet (www.corp.com/page). From another PC, out of the network, with the same browser version, I do see the button. But I did see this happen while working in VS too. I'm told this is a flaky issue, doesn't always happen. Of course we can't have buttons randomly disappearing.

It probably doesn't matter but my code is as follows:

TableRow row = new TableRow();
TableCell cell = new TableCell();
RadButton b = new RadButton();
b.Text = "Report " + (i+1);
b.ID = "b" + i;
b.Click += new EventHandler(GetReport);
cell.Controls.Add(b);
row.Cells.Add(cell);
cell = new TableCell();
cell.Controls.Add(new Label()
{
    Text = "Click for report : " + files[i]
});
row.Cells.Add(cell);
t.Rows.Add(row);

I'm re-uploading the RadControls assemblies to IIS and will report back here as to whether or not the problem persists.

[TonyG]

Again, I dunno if this helps anyone else but I've reduced this down to an issue in skin Web20 with build 918. Filed ticket 609980.
When Web20 is used the button sprites for the style get returned as as a 404. With WebBlue the buttons display as expected.

I see other people in these forums asking about things disappearing in many controls over the last few weeks. It looks like this issue creeped into this skin after build 828 but people are still approaching it as a control issue.

HTH

[Slav]

Hello Tony,

I have addressed your problem in the support ticket on the matter. Let us continue our discussion there so that the information about your case is easier to track. When the issue is resolved you can post the solution here so that the community can benefit from it.

Kind regards,
Slav
the Telerik team

[Matt]

Hi Tony/Slav,

Did you ever manage to resolve the issue? I'm having the same problem also using the Web20 skin.

Thanks,

Matt

[Danail Vasilev]

Hi Matt,

I have tried to reproduce the mentioned issue but to no avail. You can watch a short video with the test here and then tell if I am missing something.

Could you confirm the version of the RadControls as well as the browsers and their version under which you are having the unexpected behavior? If your version of RadControls is not the latest one (version 2013.1.403), does upgrading to ti resolve your issue? Could you also test our online demos and then tell us whether you are having the unexpected behavior with them as well?

If the above step, however, does not help, could you try to reproduce the issue with the attached sample and then tell us what changes you have made, so that we can make an investigation locally?

Kind regards,
Danail Vasilev
the Telerik team

[Matt]

Hi Danail,

Thanks for looking into this, unfortunately, I myself am unable to reproduce the problem. I occurs for a single user on a single machine for one of our clients. They are using IE 9, the version of RadControls being used is the Q1 2013 release.

I would worry about it too much, I was simply wondering if Tony or Slav had found the cause or a solution to the problem

Thanks again,

Matt

[TonyG]

Matt, I think our solution was simply to use another similar skin just to get out from under the immediate issue - I rarely accept that solution but in this case it was OK.. We haven't messed with this since then. Telerik announced this week that older skins are being changed or deprecated (I still need to read the announcements), so the game is changing underneath us. At some point I'll migrate to whatever the latest (and greatest) is without looking back. YMMV

HTH

[Danail Vasilev]

Hello All,

Without having enough information about the unexpected behavior it is hard to reproduce it. I have also went through the support ticket that Tony has opened about this issue, however, it seems that discussion was not lead to its end.

If it is not possible to reproduce the unwanted behavior with the attached example in my previous post, or send us a fully runnable sample with reproduction steps of the issue you can send us at least a live url which may help us with the investigation.

For the time being I can suggest you to have a look at Web Resources Troubleshooting help article or try to load the scripts of the controls from our CDN.

Regarding the skins that are going obsolete, you can find more information on the topic in 6 Telerik ASP.NET AJAX Skins Going Obsolete blog post.

All the best,
Danail Vasilev
the Telerik team

[Matt]

Thanks for the update Tony,
I guess I'll start looking for a similar theme that the client is happy with.

All the best,

Matt