Can CSS rules be dynamically added to Sharepoint 2010 Web Part Controls?

Question

It's possible to add HTML elements dynamically in a WebPart's CreateChildControls() method, like so:

protected override void CreateChildControls()
{
    base.CreateChildControls();
    . . .
    HtmlGenericControl _breakingSpace = new HtmlGenericControl("br");
    this.Controls.Add(_breakingSpace);
}

Is it possible to also add CSS rules programatically? For example, I want to make "labels" (LiteralControls) block elements so that their width value can be set. Is something like the following pseudocode possible?

CSSRule displayInlineBlock = new CSSRule("display: inline-block");
CSSRule width20em = new CSSRule("width: 20em");
reqDateStr.ApplyCSSRule(displayInlineBlock);
reqDateStr.ApplyCSSRule(width20em);

?

I've tried applying those CSS rules inline to the Literal Control itself like this:

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\" style=\"display: inline-block\"; width:200px\">Requester Date:</span>");

...but it doesn't work any differently than what I had before, which was:

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\">Requester Date:</span>");

You can see how the form looks here

UPDATE

In answer to ceej's inquiry as to what HTML is generated, here it is, straight from the browser's "Show Source" ("inline" is there, but seems to have no effect):

<h1>UCSC - Direct Payment Form</h1>
                    <table>
    <tr>
        <td colspan="4"><h2 class="finaff-webform-field-label">Section 1: Payment Information</h2></td>
        <td colspan="2"><h2 class="finaff-webform-field-label">Section 2: Requester Information</h2></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label" style="display: inline-block"; width:200px">Requester Date:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl11" type="text" value="4/23/2015" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Payment Amount:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl14" type="text" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Requester Name:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl17" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Payee Name:</span></td>
        <td colspan="3"><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl21" type="text" size="64" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Dept / Div Name:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl24" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Remit Address:</span></td>
        <td colspan="3"><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl28" type="text" size="64" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Phone:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl31" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr height="2em">
        <td><span class="finaff-webform-field-label">&nbsp;&nbsp;&nbsp;OR</span></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Mail Stop:</span></td>
        <td colspan="3"><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl37" type="text" size="64" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Email:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl40" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Last 4 Digits SSN or ITIN:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl44" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td colspan="5"><input id="ctl00_ctl24_g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c_ctl47" type="checkbox" name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl47" /><label for="ctl00_ctl24_g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c_ctl47"><span class="finaff-webform-field-label">204 submitted or on file. <strong>NOTE:</strong> If not on file, complete a <a href="https://financial.ucsc.edu/Financial_Affairs_Forms/Payee_Setup_204.pdf" target="_blank">Payee_Setup_204</a></span></label></td>
    </tr>
</table>

ceej · Accepted Answer · 2015-04-23T20:14:09.030

This should be possible. What is the generated HTML that is produced? Is the in-line style actually being output? Is the HTML malformed?

I think it might be as simple as having incorrectly specified the style in your line that applies the styles inline in the constructor of the LiteralControl. You are closing the style after inline-block - should this not be `style=\"display: inline-block; width:200px\? This would make the complete line

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\" style=\"display: inline-block; width:200px\">Requester Date:</span>");

You can certainly add dynamic controls within a web part and it should be done in the CreateChildControls method. Personally I would use a LiteralControl rather than an HtmlGenericControl for putting static text or mark up such as <br> on the page.

As for CSS and styling - most web controls have a CssClass property and a Style property. However, the control you have chosen (LiteralControl) does not. Have you considered using a Label control? This will generate a <span> and you can set the Style property. You would have something like

var reqDateStr = new Label 
    {
        CssClass= "finaff-webform-field-label",
        Text = "Requester Date:"
    };
reqDateStr.Style.Add("display", "inline-block");
reqDateStr.Style.Add("width", "200px");
this.Controls.Add(reqDateStr);

You can even set an AssociatedControlId property, which will result in a <label for="textboxId"> being output. The value should be the Id of the input control, e.g. your text box. This might be desirable in your scenario.

Hope this helps...

I answered your question about what the generated HTML is in an Update. — B. Clay Shannon-B. Crow Raven, Apr 23 '15 at 16:13
As to LiteralControl instead of HtmlGenericControl, that was my first attempt: //this.Controls.Add(new LiteralControl("
")); // <= this does nothing — B. Clay Shannon-B. Crow Raven, Apr 23 '15 at 16:27
As to the last example you give, that won't fly, because I get, "Property or indexer 'Style' cannot be assigned to -- it is read only" — B. Clay Shannon-B. Crow Raven, Apr 23 '15 at 16:45
Doh. Forgot that the style property is a collection of styles. Have corrected my answer showing how to assign key-value pairs. Thanks for pointing that out! — ceej, Apr 23 '15 at 20:15
As for LiteralControl you could try setting the Mode property to PassThrough? — ceej, Apr 23 '15 at 20:29

Can CSS rules be dynamically added to Sharepoint 2010 Web Part Controls?

UPDATE

1 Answers1