Align ASP.Net AJAX Rating Extender control to Center of Table Cell using CSS

Last Reply one month ago By dharmendr

Posted one month ago

Hi ,

Below is the thread of my question

Add (Implement) 5 Star Rating System using AJAX Rating Extender in ASP.Net

solution works fine but the alignment of the rating control cannot be made center (under the rating label in my sample)

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
.emptypng {
    background-image: url(Star.gif);
    width: 17px;
    height: 17px;
}
.smileypng {
    background-image: url(FilledStar.gif);
    width: 17px;
    height: 17px;
}
.donesmileypng {
    background-image: url(FilledStar.gif);
    width: 17px;
    height: 17px;
}
.tbl{
    width:50%;
    height:50%;
    text-align:center;
    margin: 0 auto;
    border:1px solid red;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager runat="server" ID="sc1"></asp:ScriptManager>
    <asp:Table ID="TableContent" runat="server" CssClass="tbl">
        <asp:TableRow>
            <asp:TableCell>
                <asp:Label runat="server" Text="rating"></asp:Label>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    </div>
    </form>
</body>
</html>

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on 29 days ago

Hi anvina,

Check this example. Now please take its reference and correct your code.

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .emptypng
        {
            background-image: url(images/Star.gif);
            height: 17px;
            width: 17px;
        }
        .smileypng
        {
            background-image: url(images/FilledStar.gif);
            height: 17px;
            width: 17px;
        }
        .donesmileypng
        {
            background-image: url(images/FilledStar.gif);
            height: 17px;
            width: 17px;
        }
        .tbl
        {
            width: 50%;
            height: 50%;
            text-align: center;
            margin: 0 auto;
            border: 1px solid red;
        }
        .aligncenter
        {
            width: 85px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        <asp:Table ID="TableContent" runat="server" CssClass="tbl">
            <asp:TableRow>
                <asp:TableCell>
                    <asp:Label ID="Label1" runat="server" Text="rating"></asp:Label>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </div>
    </form>
</body>
</html>

C#

protected void Page_PreInit(object sender, EventArgs e)
{
    GetMenuHtml();
}

private void GetMenuHtml()
{
    TableRow tr = new TableRow();
    TableCell td = new TableCell();
    AjaxControlToolkit.Rating rbuttons = new AjaxControlToolkit.Rating();
    rbuttons.ID = "test";
    rbuttons.MaxRating = 5;
    rbuttons.AutoPostBack = true;
    rbuttons.EmptyStarCssClass = "emptypng";
    rbuttons.FilledStarCssClass = "smileypng";
    rbuttons.StarCssClass = "smileypng";
    rbuttons.WaitingStarCssClass = "donesmileypng";
    rbuttons.CurrentRating = 3;
    rbuttons.CssClass = "aligncenter";

    td.Controls.Add(rbuttons);
    td.Controls.Add(new LiteralControl("<br/>"));
    td.Controls.Add(new LiteralControl("<br/>"));
    tr.Controls.Add(td);
    TableContent.Rows.Add(tr);
}

VB.Net

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
    GetMenuHtml()
End Sub

Private Sub GetMenuHtml()
    Dim tr As TableRow = New TableRow()
    Dim td As TableCell = New TableCell()
    Dim rbuttons As AjaxControlToolkit.Rating = New AjaxControlToolkit.Rating
    rbuttons.ID = "test"
    rbuttons.MaxRating = 5
    rbuttons.AutoPostBack = True
    rbuttons.EmptyStarCssClass = "emptypng"
    rbuttons.FilledStarCssClass = "smileypng"
    rbuttons.StarCssClass = "smileypng"
    rbuttons.WaitingStarCssClass = "donesmileypng"
    rbuttons.CurrentRating = 3
    rbuttons.CssClass = "aligncenter"
 
    td.Controls.Add(rbuttons)
    td.Controls.Add(New LiteralControl("<br/>"))
    td.Controls.Add(New LiteralControl("<br/>"))
    tr.Controls.Add(td)
    TableContent.Rows.Add(tr)
End Sub

Screenshot