RadTextBox display label above input

4 posts, 0 answers
  1. croach01
    croach01 avatar
    22 posts
    Member since:
    Aug 2007

    Posted 25 Jan 2012 Link to this post

    Since the release of Q3 2011, the property EnableSingleInputRendering has made it possible to display the label above the actual input by setting the label's css (LabelCssClass) to: 
    .wrapLabel
    {
        float:left;
        clear:left;
    }

    While this has the desired effect, you have to reset the width's for the label and the input's container:
    .riSingle .riContentWrapper {width: auto !important; }
    .wrapLabel { width: auto !important;}

    This allows the input to take up the entire width set by the control's Width property.  

    The issue I'm having is that the input extends beyond the bounding box of the control.  If you create 4 controls and set their widths to 25%, you would expect the 4 equally sized controls to take up the available 100% space.  Instead, I think the internal padding is pushing the input beyond the desired bounds of the control.

    In the attached files are some screen caps.
    Example 1 shows how the 4th control wraps to the next line. Example 2 shows IE9's Developer Toolbar's view of the span that renders around the entire control.

    Is there a way to constrain the input to the desired bounds, given any number of values I can set for the control's Width?

  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 30 Jan 2012 Link to this post

    Hi Casey,

    This issue is happen only in IE7/6 browser due to unsupported scenario of the CSS 3 property box-sizingborder-box. I guess your IE 9 browser is in compatibility or IE 7 mode. However, our developers are looking for a solution.

    Please excuse us for the inconvenience this might cause you. Let me know if I can be of further help.

    All the best,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. George
    George avatar
    13 posts
    Member since:
    Jun 2013

    Posted 23 Jul 2013 Link to this post

    I can't make this work for me.  I am using 2013 Q2 controls.
    Can someone please attach an aspx sample that contains a radtextbox with the label (the radtextbox label, not a separate label control) effectively placed above the textbox?

    Thank you.
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 24 Jul 2013 Link to this post

    Hello George,

    You can place the label above the input element by setting the LabelCssClass and overriding the display property by setting it to "block !important" as shown bellow:
    <head runat="server">
        ...
        <style type="text/css">
            .textBoxLabel {
                display: block !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            ......
                <telerik:RadTextBox runat="server" ID="RadTextBox1" Label="Some label" LabelCssClass="textBoxLabel">
                </telerik:RadTextBox>
            ....
        </form>
    </body>
    </html>

    Hope this helps.

    Regards,

    Konstantin Dikov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top