How to Reduce RadRating Star Size

[BSL Support]

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.

[Bozhidar]

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

[BSL Support]

Hi Bojo ,

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

Regards,
Murali.

[Derek Swanson]

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!

[Bozhidar]

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

[Derek Swanson]

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!

[Derek Swanson]

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

[Bozhidar]

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

[syed]

How to Increase the size of stars, I need it to convert it lot bigger, to show on survey question page.

[Bozhidar]

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

[syed]

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

[Bozhidar]

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

[syed]

Thanks alot. Its works great, and according to my desired result. Thanks once again.

[Lumin]

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.

[Marin Bratanov]

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

 

 

[Young]

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.

[Marin Bratanov]

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