Refresh button CSS issue?

[Robert]

At first, I thought it was an IE9 thing. But then I tried it in Chrome and Firefox and the rendering is the same in all 3.
The refresh button seems to have some half-hidden component showing up. If this is CSS issue or the result of not properly setting a property of the grid?

You can see it in the image, highlighted in yellow:

[Robert]

Ah, it is pulling images from the Sprite.png file and the calendar control image is nearly bleeding into the refresh image, but I am at a loss as to how to fix it. I tried adjusting the .t-refresh {background-position:-32px -240px} value but I can never get the images on either side of the refresh image hidden.

Any ideas?

[Vasil Yordanov]

Hi Robert,

This seems to be a CSS issue. You could check if you have any custom CSS that might be overwriting the .t-icon styling?

I suggest you try to adjust .t-refresh width instead of its background-position:

.t-refresh {
    width: 16px;
}

Regards,
Vasil Yordanov
the Telerik team

[Robert]

That was the issue, thanks Vasil. For some reason that the width attribute assignment isn't in telerik.common.min.cs version included with the 2011_3_1115 release. Adding it set to 10px fixed the problem.

Thanks!

[Robert]

Nevermind. Wasn't working with the beta version but is with the final.

[Mike]

FYI: This is still an issue in the Q1 2012 release. I had to modify telerik.common.css to add the 10px width for .t-refresh.

[Dimo]

Hi Mike,

In my opinion the problem is caused by some custom styles, which override the native button styling. Have you inspected the button's CSS styles in the browser to verify this? Are you able to reproduce the issue on our demos?

http://demos.telerik.com/aspnet-mvc/grid

All the best,
Dimo
the Telerik team