Remove file button image/icon not showing

[Razak]

When using MetroTouch skin, the remove file button image not showing. Perhaps it's background image position setting in CSS is off, or the stripe image is wrong. Also, there's not visual feedback on hover.

Until a fix is available, is there a way to replace the button image?

Sample image screen shot as attached.

  

[Hristo Valyavicharski]

Hi Razak,

The cancel image is embedded in the assembly and you should be able to see it without any additional settings. For your reference I'm attaching small sample based on the on line Drag and Drop demo. If it doesn't work too, please let us know which version and browser  are you using?

Regards,
Hristo Valyavicharski
Telerik

[Razak]

I've tested it using Chrome Version 28.0.1500.72 m, Firefox 21.0 and IE9. All of them didn't have the image for the said button.

Btw, I attached screenshots taken from the online demo page, viewed in all three browsers stated above.

When I changed the skin to BlackMetroSkin, the button shows the image just fine.

[Plamen]

Hi Razak,

 
Thank you for reporting this issue and for your concern with RadControls.

 W have successfully observed it at our side and I have logged it for fixing. We will make our best to fix it as soon as possible.

If you observe any other issue please don't hesitate to contact us again.
 

Regards,
Plamen
Telerik

[Magdalena]

Hello Razak,

The issue with the missing icon of remove button in RadAsyncUpload with Metro skin is already fixed. The fixed version will be available in the latest internal build that will be available next week.

We apologize for accrued inconvenience.
 
Regards,
Magdalena
Telerik

[Steven]

I'm on the latest version and still have the same issue. is there anything I should do to fix it? The issue its on metro touch not metro.

[Shinu]

Hi Stendor,

This seems to be a bug associated with the MetroTouch theme. As a work around you can try the following code in the OnClientFilesUploaded event of the RadAsyncUpload.

JavaScript:

function OnClientFilesUploaded(sender, args) {
    $(".RadUpload_MetroTouch .ruRemove").css("background-position", "-59px -2606px !important");
}

Thanks,
Shinu.

[Magdalena]

Hi Stendor,

I can not reproduce the issue with the missing icon to the cancel button. You can see the behavior of the control in different testing browser on this video. Could you please send me a live URL or runnable project with reproduced issue to can I test it locally?

 

Regards,
Magdalena
Telerik

[Steven]

I'll setup my app to be viable from the outside, but I know what the problem is, the CSS position used for the background image are wrong it shows “background-position: -9px -3309px !important;”, when it should be -2658px. I tried to fix it through CSS but since it already has !important it won’t let me. Is there something else I could do to fix the issue?

[Razak]

I fixed it by copying the 'correct' sprite image to my web app, which is C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q2 2013\Skins\MetroTouch\Common\radActionsSprite.png.

Then, I just include the following css:

.RadToolTip_MetroTouch table.rtWrapper tr td a.rtCloseButton,
.RadUpload_MetroTouch .ruRemove {
    background-image: url('../images/radActionsSprite.png') !important;
}

As you can see, the CSS above also fixes the missing image of MetroTouch tooltip close (X) button.

[Steven]

Awesome Razak. That did fix my issue. thank you very much.