How to adjust the Height and Width of those stars in the rating control?
You can customize the size of rating control stars by using the custom CSS as the stars in the rating component are just sprite icons.
Customizing the size of the stars:
To increase the height and width of the stars, use smaller or larger sprite icons as per the requirement. By using the shapeHeight and shapewidth properties, you can increase the height of the wrapper of the element that holds the sprite image.
To include a sprite icon with the custom size (16x16) and to write the custom CSS to change other effects for this new sprite image use the following code:
HTML
<input id="mosRating1" type="text" class="rating" />
JavaScript
<script type="text/javascript">
$(function () {
$("#mosRating1").ejRating({
value: 4,
cssClass: "custom",
shapeWidth:16,
shapeHeight:16
});
});
</script>
CSHTML
@Html.EJ().Rating("mosRating1").Value(3).CssClass("custom").Orientation(Orientation.Horizontal).Precision(Precision.Half).ShapeWidth(16).ShapeHeight(16)
ASPX
<ej:Rating CssClass="custom" ShapeWidth="16" ShapeHeight="16" runat="server"></ej:Rating>
CSS
.custom.e-rating.e-horizontal .e-shape-list,.custom.e-rating.e-vertical .e-shape-list,
.custom.e-rating.e-horizontal .e-shape,.custom.e-rating.e-vertical .e-shape,
.custom.e-rating.e-horizontal .e-ul,.custom.e-rating.e-vertical .e-ul,
.custom.e-rating.e-horizontal .e-reset,.custom.e-rating.e-vertical .e-reset {
/*new 16x16 star sprite image*/
background: url(images/rating.png) no-repeat;
height: 16px;
width: 16px;
}
/* Customization CSS for hover and active star */
.custom.e-rating .e-shape.inactive {
background-position: 0 -205px;
}
.custom.e-rating .e-shape.active {
background-position: 0 -82px;
}
.custom.e-rating .e-shape.selected {
background-position: 0 -82px;
}
.custom.e-rating.e-horizontal .e-reset:hover,
.custom.e-rating.e-vertical .e-reset:hover {
background-position: 0 -41px;
}
.custom.e-rating.e-horizontal .e-reset:hover,
.custom.e-rating.e-vertical .e-reset:hover {
background-position: 0 -41px;
}
.custom.e-rating.e-horizontal .e-reset,
.custom.e-rating.e-vertical .e-reset {
background-position: 0 0;
margin-left: 2px;
}
.custom.e-rating.e-horizontal .e-shape-list,
.custom.e-rating.e-vertical .e-shape-list {
background-position: 0 -205px;
float: left;
}
The following screenshot is the output of the above code with the rating control star of 16x16 size.
Rating control star with default size Rating control star with 16X16 size |
A sample with the rating image of 16 x 16 is available in the following location. In the same way, you can customize the size of the stars to various widths and heights. You can find the custom CSS and image on the content folder.
Conclusion
I hope you enjoyed learning about how to adjust the Height and Width of those stars in the rating control.
You can refer to our JavaScript Rating feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Rating example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
