在C＃中将CSS分配给动态创建的Label

Question

I'm trying to figure out how to apply CSS to a Label created in C#. Everything compiles and runs, it just doesn't seem to be applying the CSS. The CSS is in the file linked to in the site master page. Everything else in the CSS file is being applied as it should be.

Codebehind:

...
Label label = new Label();
SqlCommand command = new SqlCommand("SELECT Q_Text FROM HRA.dbo.Questions WHERE QID = 1");
command.Connection = connection;
reader = command.ExecuteReader();
reader.Read();
label.Text = reader["Q_Text"].ToString();
label.ID = "rblabel";
label.CssClass = "rblabel";
reader.Close();
holder.Controls.Add(label);
...

ASP:

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:PlaceHolder ID="holder"  runat="server">

    </asp:PlaceHolder>
</asp:Content>

CSS:

.rblabel {
    text-align:left;
    padding-left: 2em;
    font-size: 4em;
}

EDIT: added the HTML as well as the Control.Add() statement in my code (forgot to include that in my copy/pase). This HTML is the etirety of what is put into that PlaceHolder .

HTML:

<section class="content-wrapper main-content clear-fix">
    <span id="MainContent_rblabel" class="rblabel">TEST TEST TEST</span>
    <table id="MainContent_ctl00" class="radio">
    <tr>
        <td><input id="MainContent_ctl00_0" type="radio" name="ctl00$MainContent$ctl00"value="1" />
        <label for="MainContent_ctl00_0">Excellent</label></td>
    </tr><tr>
  <td><input id="MainContent_ctl00_1" type="radio" name="ctl00$MainContent$ctl00" value="1" />
         <label for="MainContent_ctl00_1">Good</label></td>
    </tr><tr>
   <td><input id="MainContent_ctl00_2" type="radio" name="ctl00$MainContent$ctl00"value="1" />
          <label for="MainContent_ctl00_2">Fair</label></td>
    </tr><tr>
   <td><input id="MainContent_ctl00_3" type="radio" name="ctl00$MainContent$ctl00"value="1" />
         <label for="MainContent_ctl00_3">Poor</label></td>
    </tr>
</table>
</section>

Answer 1

There are basically two possibilities:

1. Your label may not be rendering with the CLASS attribute set to the desired CSS class. That you can verify by looking at the rendered HTML. (If the label doesn't appear at all, your code suggests you may not be adding it to the Controls collection of its parent.)

2. Everything is rendering right, but it's not appearing correctly in your browser, due to some problem with your CSS or with another stylesheet overriding it. To debug this, you will need to use Firebug or IE's developer tools.

Good luck!

Answer 2

CssClass property is the proper way to go http://www.w3schools.com/aspnet/prop_webcontrol_style_cssclass.asp

You left out the code where you're adding the label to the page/container etc, which may be where an error lies.

Showing an HTML source output of the page to see if the label your generating actually contains a CLASS attribute with a value of "rblabel" would also be helpful.

If worse comes to worse use a Literal instead of a Label fill in the HTML.

Answer 3

It doesn't look like you are actually adding the label where you want it to appear. Try something like:

holder.Controls.Add(label);

in your code-behind.

Answer 4

A span is an inline element, so padding, width, and height aren't always honored in all browsers. Try setting it to inline-block .

.rblabel {
    text-align:left;
    padding-left: 2em;
    font-size: 4em;
    display: inline-block;
}