RadRating missing star when zoomed out

3 posts, 1 answers
  1. Rahul
    Rahul avatar
    7 posts
    Member since:
    Nov 2012

    Posted 03 Jun 2013 Link to this post

    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. 



    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. Answer
    Joana avatar
    69 posts

    Posted 06 Jun 2013 Link to this post

    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:

            width: 112px !important;

    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.

    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.
  3. DevCraft R3 2016 release webinar banner
  4. Rahul
    Rahul avatar
    7 posts
    Member since:
    Nov 2012

    Posted 06 Jun 2013 Link to this post

    Hi Joana,

    Thanks you, that's an excellent solution.

Back to Top