Use label css on custom label

4 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Dec 2011 Link to this post

    Hi,

    Owing to the layout of my forms I want to have a asp:label tag styled using the same style as labels attached to a RadTextBox, combo box etc.  How would I reuse this?  Using the CSSClass="riLabel" on the username label doesn't seem to do anything so I assume that there is some level of specification behind it.  What would be nice is a RadLabel component...

    <tr> 
        <td class="gridAdminLabel"><asp:Label CssClass="riLabel">Username:</asp:Label></td>
        <td class="gridAdminCell">
            <telerik:RadTextBox ID="uxUsername" Text="" runat="server" CssClass="formTextBox"></telerik:RadTextBox>
            <asp:RequiredFieldValidator ID="uxUsernameReq" runat="server"  ControlToValidate="uxUsername" ErrorMessage="RequiredFieldValidator"
                Text="<img src='/blank.gif' alt='Required field' class='errIconTextBox' />" Width="0" ValidationGroup="LoginValidationGroup"></asp:RequiredFieldValidator>
        </td>
    </tr>


    Regards,

    Jon
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Dec 2011 Link to this post

    Hello,

    Try the following CSS.
    CSS:
    <style type="text/css">
       .riLabel
       {
          font: 12px "segoe ui" ,arial,sans-serif !important;
       }
    </style>

    ASPX:
    <asp:Label ID="Label 1" runat="server" CssClass="riLabel" Text="Username"></asp:Label>

    Thanks,
    Princy.
  5. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 08 Dec 2011 Link to this post

    Hello Jon,

    You can either enter the style as Princy mentioned or you can could just do this:

    <tr>  
        <td class="gridAdminLabel RadInput RadInput_Default"><asp:Label CssClass="riLabel">Username:</asp:Label></td>
        <td class="gridAdminCell">
            <telerik:RadTextBox ID="uxUsername" Text="" runat="server" CssClass="formTextBox"></telerik:RadTextBox>
            <asp:RequiredFieldValidator ID="uxUsernameReq" runat="server"  ControlToValidate="uxUsername" ErrorMessage="RequiredFieldValidator"
                Text="<img src='/blank.gif' alt='Required field' class='errIconTextBox' />" Width="0" ValidationGroup="LoginValidationGroup"></asp:RequiredFieldValidator>
        </td>
    </tr>

    I added the RadInput and RadInput_Default (if you're using the Default skin, you will need to change it if using another skin or if using the RadSkinManager you could change it to this "RadInput_<%# Container.Skin %>") classes to your label cell, so that the correct styles are applied to your label and they match the one used by the actual RadTextBox label.

    I hope that helps.
  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Dec 2011 Link to this post

    Hi Guys,

    Many thanks for your help.  I'm working on an adapted version of Kevin s suggestion as I wanted to get the colour from the skin as well.  My seup uses the skin being in a key in the web.config file so I needed to get it from there.

    It works for setting the style - with the exception of colour :(  

    <td class='gridAdminLabel RadInput
    RadInput_<%=System.Configuration.ConfigurationSettings.AppSettings("Telerik.Skin") %>'>
    <    asp:Label CssClass="riLabel">Username:</asp:Label>
    </    td>

    I've checked to make sure that I haven't set the label to black anywhere and I haven't.  Is there some other thing that has been missed?

    Regards,

    Jon
  8.
Back to Top