CODEWITHSUNDEEP
cssasp.netfontsfont-sizecheckboxlist
User
User

Reputation: 153

Why do Font-Size and CssClass properties are not working in CheckBoxList in aspx page?

I want to increase the font size of checkboxlist values so I added Font-Size = "large" property inside <asp:CheckBoxList> but it's not working.

<form id="form1" runat="server">
        <table>  
            <tr>
               <td  style="padding-left:50px;padding-top:20px">
        <asp:CheckBoxList runat="server" ID="ChkList" RepeatColumns="4" repeatLayout="Table" RepeatDirection="Horizontal" Font-Size="Large"></asp:CheckBoxList>
                   </td>
                </tr>
        <tr>
            <td style="padding-left:50px; padding-top:10px;">
            <asp:Button runat="server" ID="Submit" OnClick="Submit_Click" Font-Size="Small" Text="Submit"></asp:Button>
                </td>
            </tr>


</table>
    </form>

I even tried CssClass property as mentioned in this answer but it also not working

CSS:

<style>
        .chkboxlist td
    {
    font-size:large;
    }
    </style>

ASPX:

    <form id="form1" runat="server">
        <table>  
            <tr>
               <td style="padding-left:50px;padding-top:20px;">
        <asp:CheckBoxList runat="server" ID="ChkList" RepeatColumns="4" repeatLayout="Table" RepeatDirection="Horizontal" CssClass="chkboxlist"></asp:CheckBoxList>
                   </td>
                </tr>
        <tr>
            <td style="padding-left:50px; padding-top:10px;">
            <asp:Button runat="server" ID="Submit" OnClick="Submit_Click" Font-Size="Small" Text="Submit"></asp:Button>
                </td>
            </tr>


</table>
    </form>

Also I tried adjusting font-size inside <td> but it also not working.

Visual Look of my output:

enter image description here

Source Code:

<table>  
            <tr>
               <td style="padding-left:50px;padding-top:20px;">
                   <table id="ChkList" class="chkboxlist" border="0" style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;">
    <tr>
        <td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_0" type="checkbox" name="ChkList$0" /><label for="ChkList_0">Agent Checque</label></span></td><td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_1" type="checkbox" name="ChkList$1" /><label for="ChkList_1">CC Cheque</label></span></td><td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_2" type="checkbox" name="ChkList$2" /><label for="ChkList_2">Customer Cheque</label></span></td><td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_3" type="checkbox" name="ChkList$3" /><label for="ChkList_3">DD Cheque</label></span></td>
    </tr><tr>
        <td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_4" type="checkbox" name="ChkList$4" /><label for="ChkList_4">Sathiya Cheque</label></span></td><td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_5" type="checkbox" name="ChkList$5" /><label for="ChkList_5">SathiyaTest</label></span></td><td><span style="color:Black;background-color:Transparent;font-family:Verdana;font-size:8pt;"><input id="ChkList_6" type="checkbox" name="ChkList$6" /><label for="ChkList_6">Test</label></span></td><td></td>
    </tr>
</table>

Why these changes are not reflecting the font-size?

Upvotes: 2

Views: 4303

Answers (3)

User
User

Reputation: 153

Finally I found the place where it causing the problem. In my project solution I have App_themes folder where one skin file is available. In that skin file we have mentioned all the controls like font-size, backround-color, font-style etc for all CheckBox, CheckBoxList, DropDownLists, DropDowns, Buttons, TextBoxs and Labels.

In that file for CheckBox font-size is mentioned as Font-Size="8pt" so it's reflecting in the output even after I mentioned the Font-Size in the inline property of CheckboxList in my aspx page. Now I changed as <asp:CheckBox runat="server" Font-Size="11pt" Font-Names="Verdana" BackColor="transparent" ForeColor="Black"/> in .Skin file which changes the font-size of my checkboxs.

Update:

I created a new skin file named Checkbox and mentioned SkinID="chkFont" in the below control.

<asp:CheckBoxList SkinID="chkFont" runat="server" Font-Size="11pt" Font-Names="Verdana" BackColor="transparent" ForeColor="Black"/> this in the file.

<%@ Page Language="C#" AutoEventWireup="true" Theme="Checkbox" CodeFile="FlexExplicitTransactions.aspx.cs" Inherits="HDFC.CTIClient.FlexExplicitTransactions" %>

I mentioned theme name as checkbox in my aspx page. In my CheckboxList menu I used SkinID property as SkinID="chkFont" and Run the program. Now the font size of my CheckboxList alone increased and not all the other checkboxlist font sizes.

Upvotes: 1

VictorySaber
VictorySaber

Reputation: 3164

Set the style in the page so we know there is nothing overriding it (you can move this to a css file later). Create a class with a style (again you can refine it later - we're just ensuring we don't make any mistakes in our CSS that cause the element not to get the style).

<style>
.chkboxlist
{
font-size:24px;
}
</style>

With CssClass applied to the checkboxlist:

<asp:CheckBoxList runat="server" ID="ChkList" RepeatColumns="4" repeatLayout="Table" RepeatDirection="Horizontal" CssClass="chkboxlist"></asp:CheckBoxList>

This should show the larger font size for the label.

Upvotes: 2

bhanu.cs
bhanu.cs

Reputation: 1365

If you notice at the runtime the check box list will be converted to tr's and td's. You can use CSS for this. For example your checkbox id is ChkList. Set ClientIDMode to Static and Then you can define following css property.

<style>
#ChkList label
{
font-size:22px;
color:Blue;
}
</style>

Upvotes: 0

Related Questions