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

RadRating missing star when zoomed out

2 Answers 67 Views
Rating
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 03 Jun 2013, 10:41 AM
Hi ,

I am having issue with RadRating control , It renders fine if the browser is zoomed to 100 %. But in chrome if the browser is zoomed 90 % or below 1 out of 5 stars will go missing. 

I can see that the 5th start is there in source code but pushed to a new line and goes hidden, I checked Demo page of RadRating control  (http://demos.telerik.com/aspnet-ajax/rating/examples/gridrating/defaultcs.aspx) and this issue is there as well. 

It will be very rare someone zooming their browser to 90 % but it will be better to make sure even when that happens control will be  rendered fine. 

Steps to reproduce the issue:

1. Take the demo page in chrome
2. Set zoom to 90% 
3. Reload the page

I tried setting CSS zoom on both control and the whole body but it is not helping. Setting a CSS zoom  of 50 % on control will show all 5 stars  but then the stars will be too small. It will be great if someone can suggest me a workaround to fix this. 

Thanks,
Rahul

UPDATE:

I manage to hack the code by setting width of RadRating div from 104px to 112px using jQuery on page load. Still it will be great to know a nice and neat way to fix this.

2 Answers, 1 is accepted

Sort by
0
Accepted
Joana
Telerik team
answered on 06 Jun 2013, 07:04 AM
Hi Rahul,

As the browser zooms the entire page, visual glitches could appear when the layout is based on background images and/or sprites.You can modify the width of the RadRating control by adding the following CSS style directly in your page:

<style>
    .RadRating
    {
        width: 112px !important;
    }
</style>

However, your approach to change the width with jQuery on load is also an option. You can find more information about the CSS classes of RadRating in these articles: RadRating CSS classes and RadRating Skin CSS File. You can review this blog post related to the browser zoom, even though it is associated with RadWindow and RadDock.

I hope you find this information helpful.

Regards,
Joana
Telerik
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 the blog feed now.
0
Rahul
Top achievements
Rank 1
answered on 06 Jun 2013, 08:42 AM
Hi Joana,

Thanks you, that's an excellent solution.

Cheers,
Rahul
Tags
Rating
Asked by
Rahul
Top achievements
Rank 1
Answers by
Joana
Telerik team
Rahul
Top achievements
Rank 1
Share this question
or