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:
While this has the desired effect, you have to reset the width's for the label and the input's container:
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?
.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?
3 Answers, 1 is accepted
0
Hi Casey,
This issue is happen only in IE7/6 browser due to unsupported scenario of the CSS 3 property box-sizing: border-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
This issue is happen only in IE7/6 browser due to unsupported scenario of the CSS 3 property box-sizing: border-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
0
George
Top achievements
Rank 1
Rank 1
answered on 23 Jul 2013, 06:27 AM
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.
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.
0
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:
Telerik
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,
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.