How to Reduce RadRating Star Size

17 posts, 0 answers
  1. Murali
    Murali avatar
    16 posts
    Member since:
    Apr 2009

    Posted 22 Oct 2010 Link to this post

    Hi,

    I am using RadRating Control in a RadGrid. i have paucity of space for the default sized stars RadRating generates. Is there anyway to reduce the size of the stars? i tried creating a custom skin but in vain. can anybody help me? Help much appreciated.

    Thank you,

    Murali Krishna.
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 25 Oct 2010 Link to this post

    Hello Murali,

    If you want to use smaller rating items, you should create a custom skin where the sprite images will be smaller than the original one. It will also be necessary to reduce the item sizes in the custom CSS file in order to set the new width and height dimensions of the Rating items.

    For your convenience I have created and attached a custom Rating skin with smaller items based on the Default Telerik Skin, which you could use directly in your application, or you could use it as an example/template to customize new color scheme sprite images.

    Attached is also ratingsmaller.gif showing the result in the browser comparing the normal sized Rating and the new smaller custom rating.

    Greetings,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Murali
    Murali avatar
    16 posts
    Member since:
    Apr 2009

    Posted 25 Oct 2010 Link to this post

    Hi Bojo ,

    Thank you very much. it worked out perfect. I appreciate all the help. Thank you once again.

    Regards,
    Murali.
  5. Derek Swanson
    Derek Swanson avatar
    3 posts
    Member since:
    Jan 2007

    Posted 19 Mar 2011 Link to this post

    Hi,

    I am trying to implement the same solution posted here and for the most part it works except for one item.  When I set the value to say 3 out of 5 stars, as an example, the first 3 stars are not highlighted.  Everything works normally using the normal CSS, so this leads me to believe there is an extra step needed in order to show the highlighted stars for the smaller CSS.  

    Any suggestions to get the first 3 stars highlighted?  Thanks!
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 19 Mar 2011 Link to this post

    Hello Derek,

    We have been asked just to re-size the sprite stars, and we did it. Please, note that we do not support custom solutions like that, and even if we are trying to help, we could not be responsible if the controls does not work as expected after all custom changes.

    In that case, except sprite changes, some CSS background-position should be overwritten. To have stars selected you should add the following CSS code also:

    div.RadRating_Smaller a span
    {
        background-position: 0 0;
    }
     
    div.RadRating_Smaller .rrtSelected a span
    {
        background-position: -18px 0;
    }
     
    div.RadRating_Smaller .rrtOver a span
    {
        background-position: -18px -36px;
    }

     Redesigned sprite has been also attached.

    If some of the events do not behave as expected, you should check if the necessary background positions are correct and to overwrite it form the base stylesheet.

    Kind regards,
    Bojo
    the Telerik team
  7. Derek Swanson
    Derek Swanson avatar
    3 posts
    Member since:
    Jan 2007

    Posted 19 Mar 2011 Link to this post

    Hi,

    Thank you for your help.  I think we are close.  I see a difference in the stars in that they are not hightlighted, but when I set a value to the rating control, the actual rating isn't seen.  In other words, my hope is that when I set the rating to be 3, 3 stars would be highlighted and the other 2 would not be highlighted. 

    What I did is I used the same CSS that was provided in the original post and then added the CSS with the new sprite that you just provided.  Is there anything else I might be missing to get the actual value highlighted? 

    Thanks again!
  8. Derek Swanson
    Derek Swanson avatar
    3 posts
    Member since:
    Jan 2007

    Posted 19 Mar 2011 Link to this post

    Hi,

    Never mind!  I figured it out.  What you sent was correct.  There was just one error in that CSS that was provided.  For the ".rrtSelected a span", there wasn't a space between the -18px and the 0, but it looks right to what you sent, so not sure why it copied wrong.  I added the space, and it works perfectly!!

    Thank you so much for the help and the fast turn around time.  You are awesome!

    Cheers,
    Derek
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 19 Mar 2011 Link to this post

    Hello Derek,

    Glad to hear you have figured it out. Probably it is a bug of copy/paste function, I take a look at my code in visual studio and .rrtSelected a span positions are not merged.

    It may be necessary also to override the following classes: .rrtPartComplement and .rrtPart. If you do that, make sure you are using the right selectors and cascade in order to make the selector heavier: div.RadRating_Smaller. If you need further assistance with your project, you could open a support ticket and send us the application for further assistance.

    Regards,
    Bojo
    the Telerik team
  10. syed
    syed avatar
    3 posts
    Member since:
    Jul 2011

    Posted 19 Jul 2011 Link to this post

    How to Increase the size of stars, I need it to convert it lot bigger, to show on survey question page.
  11. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 19 Jul 2011 Link to this post

    Hi,

    To increase the star size, the process would be similar to decrease them. You should create a custom sprite image with your desired star size - it does not matter bigger or smaller. Then you should replace the original sprite with the custom one, and to change in the CSS file the rating sizes and rating position in order to fit the new stars size.

    Greetings,
    Bojo
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  12. syed
    syed avatar
    3 posts
    Member since:
    Jul 2011

    Posted 28 Sep 2011 Link to this post

    Hi,

    I know, this would be the same procedure, and I tried to make sprite size bigger, but it didn't work. It would be great as you did with reduce size, if you can send me the rating star in double in size from the original one, with style sheet, same skin. I have done so many things but still unable to do it.

    Thanks
  13. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 29 Sep 2011 Link to this post

    Hello Syed,

    Attached is a sample project containing RadRating with double sized stars. Note that we do not support custom solutions and it`s developer`s responsibility to ensure if after the sprite resize the control will work properly.

    Kind regards,
    Bozhidar
    the Telerik team
    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 their blog feed now
  14. syed
    syed avatar
    3 posts
    Member since:
    Jul 2011

    Posted 29 Sep 2011 Link to this post

    Thanks alot. Its works great, and according to my desired result. Thanks once again.
  15. Lumin
    Lumin avatar
    2 posts
    Member since:
    Feb 2015

    Posted 10 Feb 2015 in reply to syed Link to this post

    Hey!!! Quick question. Are there any HIGHER QUALITY stars that can be used if we wanted these larger? We are trying to deploy the star rating question via html on tablets onsite. The star default size is too small for touch. Is there an easy solution to use higher quality, larger stars?

    Attached is the current default star rating question zoomed in... yuck.
  16. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 11 Feb 2015 Link to this post

    Hello Barclay,

    We are currently working on creating a Lightweight RenderMode for the rating control that will use font icons for the stars, so the control will become elastic and you will be able to change its size or zoom the page. I cannot provide a firm ETA at the moment (even though we will do our best to plug it in for the Q1 2015 release), so please stay tuned to the release notes.

    In the meantime you can consider using a mobile-friendly skin like MetroTouch, BlackMetroTouch, Silk or Glow as they provide larger dimensions. You can use the Device Detection Framework we provide to evaluate the screen size on the server to change the Skin property of the control (or of a RadSkinManager).

    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  17. Young
    Young avatar
    8 posts
    Member since:
    Nov 2012

    Posted 09 Jun in reply to Marin Bratanov Link to this post

    I see that the RenderMode is now implemented for RadRating http://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes However, I've been unable to find documentation about how to change the size.
  18. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 10 Jun Link to this post

    Hi,

    The following article explains how the elastic capabilities of the control work so you can change its size: http://docs.telerik.com/devtools/aspnet-ajax/controls/rating/mobile-support/elastic-design.

    Here is an example based on it that lets you see the difference side by side:

    <style type="text/css">
        div.RadRating.big
        {
            font-size: 22px;
        }
        div.RadRating.small
        {
            font-size: 12px;
        }
    </style>
    <telerik:RadRating ID="RadRating1" runat="server" RenderMode="Lightweight" CssClass="small">
    </telerik:RadRating>
    <telerik:RadRating ID="RadRating2" runat="server" RenderMode="Lightweight" CssClass="big">
    </telerik:RadRating>


    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017