RadRating Half Star Style

8 posts, 0 answers
  1. Michael Davis
    Michael Davis avatar
    9 posts
    Member since:
    Feb 2010

    Posted 01 Apr 2010 Link to this post

    Hi,
    I'm creating a custom skin for RadRating which will make the stars smaller (originally they are 18px, I'm making them 14px). Everything works when the value is an even number. When it is set to half a star, the span is given a 9px width inline style (I need it to be 7px) but no class for identifying which list item is a half star vs a star is given, so I can't override the inline style. Is there any way to identify which list items are half stars or a way I can change the 9px span width to 7px?
    Thanks,
    Mike
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 07 Apr 2010 Link to this post

    Hello Michael Davis,
    In order to change the width/height of the rating items, you need to make the following changes to the common CSS file of the rating control (RadRating.css), in addition to changing the width and height of the elements:
    .RadRating ul li .rrtPart
    {
        background-position:-18px -36px;
        margin-top:-14px;
    }

    .RadRating ul li .rrtPartComplement
    {
        background-position:-18px -18px;
        margin-top:-14px;
    }

    You need not change anything but the above mentioned styles. The rating control will calculate the width/height of the SPAN element that you mention dynamically.

    I have attached an updated version of the common CSS file of the rating control in order to demonstrate how you can change the width and height of the rating items to 14px.

    Greetings,
    Tsvetie
    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. Michael Davis
    Michael Davis avatar
    9 posts
    Member since:
    Feb 2010

    Posted 13 Apr 2010 Link to this post

    Thanks Tsvetie.
    This works when hovering, however, these will be static with a specified value. When I specify a value of *.5 to start with, it still has a width of 9px. Any way around this?
    Thanks again,
    Mike
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Apr 2010 Link to this post

    Hello Michael Davis,
    I am not quite sure I understand the problem you report. Could you please open a new support ticket and send me a simple running project with your custom skin that demonstrates the problem, as well as information on the steps I need to follow in order to reproduce it?

    Regards,
    Tsvetie
    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.
  6. Michael weinberger
    Michael weinberger avatar
    17 posts
    Member since:
    Aug 2005

    Posted 15 Jul 2010 Link to this post

    I want to add something to this, that can be related to the problem reported.

    I created a "Small Rating" skin, so I have RadRating in half size (9px) for some portions and listings in the site.
    But I noticed that when the stars are rendered in continuous mode the rendering includes a Width property for the inner SPAN component. So if that star is only 50% filled "width: 9px" is added (so assumming always a 18pxs start, and causing it to render as 100% filled in my small skin version).

    As a suggestion, you can do the same with "width: 50%", and allowing more control to the Skin developers. That will be great to see that in the next version of this great control!.

    Thanks
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Jul 2010 Link to this post

    Hi Michael,
    I checked the support ticket that Michael Davis opened and the problem he reported turned out to be a bug in the rating control. However, we fixed the problem, and in case you are using the latest version of the Telerik.Web.UI assembly (2010.2.713), the rating control should render as expected.

    In case you can still reproduce the problem with the latest version of the suite, please open a formal support ticket and send me a running test project that demonstrates it.

    Best wishes,
    Tsvetie
    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
  8. Jason
    Jason avatar
    9 posts
    Member since:
    Apr 2011

    Posted 08 Feb 2012 Link to this post

    I'm trying to make the stars larger to work with a touch display and a finger.  I'm lost in all the CSS goo - I've tried to change the above styles, the height and width, and nothing changes.

    HELP!

  9. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 13 Feb 2012 Link to this post

    Hello Jason,

    The desired appearance can be achieved with a fully customized CSS and image sprite. You should increase the rating element and then to override the base CSS styles according to new Rating sizes and background positions.

    In the following forum thread there are an examples of how to reduce and how to increase the Rating items.

    While editing the sprite, you could also change the Rating icons with whatever icon you like.

    For your convenience I have attached a sample project with a Rating custom skin where the rating stars are bigger.

    Note that we do not support custom solutions and even if we try to give some help, we it is a developer`s responsibility to ensure that the controls will work properly after such a customization.

    Creating RadRating Custom skin could be also a useful resource.

    All the best,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017