How to change Label font size

Question

How to change Label font size

Donald Symmons 3,066

I am trying to change font size of label controls, but what I tried is not working. Any help?

<asp:Label ID="LabelName" runat="server" Text="Name"></asp:Label>
<asp:Label ID="LabelDate" runat="server" Text="Date"></asp:Label>
<div class="input-group">
   <asp:DropDownList ID="FontSize" runat="server" CssClass="form-control" onchange="ChangeSize(this.value)"></asp:DropDownList>
</div>

JavaScript

<script type="text/javascript">
        function ChangeSize(FontValue) {
            document.getElementById("LabelName").style.FontSize = ValueFont;
	    document.getElementById("Labeldate").style.FontSize = ValueFont;
        }
    </script>

The font size in the DropDownList control is populated from Database

private void FetchFontSize()
        {
            using (SqlConnection con = new SqlConnection())
            {
                con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand("SELECT fontsize FROM FontTable", con))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    FontSize.DataSource = cmd.ExecuteReader();
                    FontSize.DataTextField = "fontsize";
                    FontSize.DataValueField = "fontsize";
                    FontSize.DataBind();
                    con.Close();
                    FontSize.Items.Insert(0, new ListItem("Size", " "));
                    FontSize.Items[0].Selected = true;
                    FontSize.Items[0].Attributes["disabled"] = "disabled";
                }
            }
        }

Accepted answer

0 additional answers

Your answer

Answer 1

Hi @Donald Symmons,

There are some minor issues with your code. You should get FontValue instead of ValueFont in js.

The first character of FontSize is lowercase; the Labeldate should be the LabelDate.

We don't know the font size data saved in your database. If it's just a simple number, you need to add units.

For example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ChangeSize(FontValue) {
            document.getElementById("LabelName").style.fontSize = FontValue + "px";
            document.getElementById("LabelDate").style.fontSize = FontValue + "px";
        }
    </script>
    <style>
       
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="LabelName" runat="server" Text="Name"></asp:Label>
            <asp:Label ID="LabelDate" runat="server" Text="Date"></asp:Label>
            <div class="input-group">
                <asp:DropDownList ID="FontSize" runat="server" CssClass="form-control" onchange="ChangeSize(this.value)">
                     <asp:ListItem Value="">Size</asp:ListItem>
                    <asp:ListItem Value="10">10</asp:ListItem>
                    <asp:ListItem Value="20">20</asp:ListItem>
                    <asp:ListItem Value="30">30</asp:ListItem>
                </asp:DropDownList>
            </div>
        </div>
    </form>
</body>
</html>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,066 Reputation points

2023-12-08T08:08:12.9866667+00:00

Thanks @Lan Huang-MSFT

Share via

How to change Label font size

0 additional answers

Your answer