Click here to Skip to main content
15,886,362 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Howdy ... I'd like to obtain some input with regards to specifying a CssClass for all server side controls vice having to specify the CssClass property for each control in the HTML. For example:

XML
<div class="data_entry_form">

   <div class="rowElem">
      <div class="data_entry_pair">
         <SFWeb:Label  ID="lblFirstName"  runat="server" CssClass="label" Text="First Name:"></SFWeb:Label>
          <SFWeb:TextBox  ID="txtFirstName"  runat="server" CssClassclass="input"></SFWeb:TextBox>
        </div>

    </div>


The corresponding CssClass looks like this:

CSS
.data_entry_form .data_entry_pair .label{
    font: normal 12px "Verdana", Arial, Helvetica, sans-serif;
    margin-right:5px;
    text-align:left;
    background-color:#FFFFFF;
    width: auto;
    }

.data_entry_form .data_entry_pair .input{
    font: bold 12px "Verdana", Arial, Helvetica, sans-serif;
    margin-right: 20px;
    text-align:left;
    background-color:#FFFFFF;
    }


I'd like to be able to define the CssClass to something like this (no period in the "label" part):

CSS
.data_entry_form .data_entry_pair label{
    font: normal 12px "Verdana", Arial, Helvetica, sans-serif;
    margin-right:5px;
    text-align:left;
    background-color:#FFFFFF;
    width: auto;
    }


Thus alleviating the necessity to define the CssClass for every <sfweb:label xmlns:sfweb="#unknown"> and <sfweb:textbox> in the "data_entry_pair" group.

As an additional note, I do have access to the control's server-side code. It seems logical to me to set this programmaticaly in the control's constructor, but I don't know where that is located in the code framework's code.

Just for reference, the client side HTML source renders like so:

XML
<div class="rowElem">
    <div class="data_entry_pair" style="width:250px">
        <span id="ctl00_Body_lblSortName" class="label">Sort Name:</span>
        <input name="ctl00$Body$txtSortName" type="text" id="ctl00_Body_txtSortName" class="input" style="width:250px;" />
    </div>
</div>


Long question I know ... thanks for reading. I just hate having to repeat the same thing over and over again when it could be programmed once (which is what OO is partially about).

Thank you!
Posted
Updated 4-Oct-15 3:44am
v2

1 solution

As the label is rendered as span, so do like this.
CSS
.data_entry_form .data_entry_pair span {
    font: normal 12px "Verdana", Arial, Helvetica, sans-serif;
    margin-right:5px;
    text-align:left;
    background-color:#FFFFFF;
    width: auto;
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900