Inconsistent behavior of RadTextbox css class?

5 posts, 0 answers
  1. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 25 Feb 2013 Link to this post

    I have a RadTextBox on the screen and I am trying to customize the label as illustrated in .http://www.telerik.com/help/aspnet-ajax/input-adding-labels.html.  I'm not sure I understand what I'm seeing.

    It looks to me like some but not all aspects of the css class are being implemented in the box label.  I can set colors but so far I have been unable to set the font size or boldness. 

    Suggestions?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Feb 2013 Link to this post

    Hello Boris,

    Try the following code to set the font size and boldness of the RadTextBox Label.

    ASPX:
    <telerik:RadTextBox ID="RadTextBox1" runat="server" Label="Name:" LabelCssClass="MyLabelStyle">
    </telerik:RadTextBox>

    CSS:
    <style type="text/css">
        label.MyLabelStyle.riLabel
        {
            font-size:18px;
            font-weight:bold;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 26 Feb 2013 Link to this post

    Still no good.  (Quite frankly I've only recently returned to web development and I'm not comfortable with CSS. The bulk of my work focuses on business logic and SQL.  That said, I've checked the main css file and it has no references to labels at all that I can see.  I can't find anything that might be overriding my local setting here.  It's very minimal in any case.)

    Here's what I have so far.
    I'm going to attach an image file.  My problem is that I want the textboxes to have roughly the same size and font as the two combo boxes they're next to.  (I even jacked it up to 36px without effect.)

    The css. (This is local, same page as the controls.)
     label.MyLabelStyle.riLabel {
                background: inherit;
                color: black;
                font-size: 18px;
                font-weight: bold;
            }

    Here's the HTML (There's also a couple of validators I've left out, but I don't see how they could affect display.):
    <telerik:RadComboBox ID="ddlCat" runat="server" DataMember="CategoryId" DataTextField="CatDesc" DataValueField="CatId" OnClientSelectedIndexChanged="checkForNewUser" Height="200px" Label="Category" Sort="Ascending" NoWrap="True" Font-Size="Large" Skin="Simple" Width="275px" Font-Names="Arial"></telerik:RadComboBox>
                                          
    <telerik:RadComboBox ID="ddlUrg" runat="server" DataMember="UrgencyLevelId" DataTextField="UrgencyDesc" Height="200px"
             DataValueField="UrgencyLevelId" Label="Urgency" Font-Size="Large" Skin="Simple" Width="225px" Font-Names="Arial">
    </telerik:RadComboBox>                                        

    <telerik:RadTextBox ID="txtLocation" runat="server" Label="Loc/Cube#" Width="250px"  Font-Names="Arial" Font-Size="Large" LabelCssClass="MyLabelStyle" ></telerik:RadTextBox>
     
    <telerik:RadTextBox ID="txtPhone" runat="server" Label="Phone#/Ext" Width="250px" Font-Names="Arial" Font-Size="Large"  LabelCssClass="riLabel MyLabelStyle"></telerik:RadTextBox>



      
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Feb 2013 Link to this post

    Hello Boris,

    Please have a look at the following mark up which works fine at my end.

    ASPX:
    <head runat="server">
        <title></title>
        <style type="text/css">
            label.MyLabelStyle.riLabel
            {
                font-size: large;
                font-family: Arial;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadComboBox ID="ddlCat" runat="server" DataMember="CategoryId" DataTextField="CatDesc"
                AllowCustomText="true" DataValueField="CatId" Label="Category" Sort="Ascending"
                Font-Size="Large" Skin="Simple" Font-Names="Arial">
            </telerik:RadComboBox>
            <telerik:RadComboBox ID="ddlUrg" runat="server" DataMember="UrgencyLevelId" DataTextField="UrgencyDesc"
                AllowCustomText="true" DataValueField="UrgencyLevelId" Label="Urgency" Font-Size="Large"
                Skin="Simple" Font-Names="Arial">
            </telerik:RadComboBox>
            <telerik:RadTextBox ID="txtLocation" runat="server" Label="Loc/Cube#" Width="250px"
                Font-Names="Arial" Font-Size="Large" LabelCssClass="MyLabelStyle">
            </telerik:RadTextBox>
            <telerik:RadTextBox ID="txtPhone" runat="server" Label="Phone#/Ext" Width="250px"
                Font-Names="Arial" Font-Size="Large" LabelCssClass="MyLabelStyle">
            </telerik:RadTextBox>
        </div>
        </form>
    </body>
    </html>

    Thanks,
    Shinu.
  6. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 27 Feb 2013 Link to this post

    I'm more confused than ever.

    The only way I could get the label to display right in VS was to add the attribute Skin="" to the textboxes.

    Once I did that it looked OK in the designer.

    However when I run the program (in any browser.  We're currently using Chrome, IE, and Firefox.)  the labels are unchanged.

    Thanks for your effort but let's just forget about this.  Much ado about nothing.  I set the label width to 0 and put in separate ordinary ASP.Net label controls.  Problem solved.  
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017