I recently downloaded and upgraded our website with the latest release 2013.1.220.40 and seem to only be having one issue that I came accross. For some reason, all of the RadTextBox controls no longer are respecting the Width property when set to a %, instead they only seem to repect the Width when set in pixels.
Has something changed with the controls and caused the Width to no longer work for percentages? I also tried setting the width via CSS to see if it would work and it did to an extent. Once I did that, the textbox was much longer than it's parent container to the point where even setting margin-right to -1000px on a DIV to wrap it still did not prevent the textbox from overflow.
Currently the html looks like so:
<
div
class
=
"fix-100"
>
<
telerik:RadTextBox
ID
=
"NewRole"
runat
=
"server"
Width
=
"100%"
EmptyMessage
=
"enter new role to add..."
/>
</
div
>
The wrapping DIV with the class of "fix-100" is what I usually wrap around all my RadTextBoxes that I normally set to 100%. The CSS for that class simply sets margin-right to -4px as it seems the RadTextBox at 100% is slightly longer than it should be.
Additionally, I downgraded the controls back to version 2012.3.1308.40 and the problem went away and the RadTextBoxes were respecting the width when set in % again.
I appreciate any help.
Thanks,
Ron
20 Answers, 1 is accepted
I tested the provided code with Q1 2013 version of the controls and the TextBox width is working properly. Check the attached sample page and let me know what is the difference in your case.
All the best,
Pavlina
the Telerik team

The thing is, I had what appeared to be identical PC's (same OS & browser) and the percantage width would work on one but not the other. The fixed pixel width solved it for now. Probably why Telerik support says there is no problem because they don't see a problem. Trust me, it's there.
If you are using IE7 indeed the problem with TextBox width when SingleInputRendering is enabled can be observed. It is already logged and our developers will fix it for the next version of the controls. Please excuse us for the inconvenience caused.
Regards,
Pavlina
the Telerik team

We just ran into this issue as well while testing IE7 support after upgrading to the latest release of the AJAX controls (2013.1.417.40). You mentioned that it will be fixed for the "next version" of the controls. When can we expect the next version to be available?
Thanks,
Vijay

The next version of the controls will be released in the middle of June 2013.
About the other question that the problem is also observed in IE8, can you verify that the browser is not running with Document Mode: IE7?
Kind regards,
Pavlina
the Telerik team

I have the same issue. After I upgraded the controls to latest version (2013.1 417) the RadTextBox width does not work for percentage (%). Kindly let me know when we can expect the next release with the fix for this?
Regards,
Rajesh
The problem with Textbox width is fixed in version Q2 2013 of RadControls released on 6/11/2013. Download it and see if you still encounter any issues.
Regards,
Pavlina
Telerik


This is really causing some pain points as there are some new features we wanted to use and we still cannot upgrade to it yet.
Thank you both for the feedback.
Could someone give an example code that he uses?
I have tried the code provided in the beginning of this thread and it is working correct. (The advanced pager in the grid also looks correct when I browser the online demos)
Regards,
Vasil
Telerik

I have solved the problem with the width of the textboxes at this point. It appears I had some CSS I was applying to make up for the 100% width problem in previous versions. This was causing the latest version to still not appear correctly. Once I removed the CSS fix for that, the textbox width worked fine.
However, the textbox height is still not showing right all the time. The following instances is when I notice this issue:
1. Inside a radpageview.
2. Inside a edit template in radgrid.
3. Sometimes the textboxes in the advanced pager of radgrid.
With regards to #1, I tested taking the textbox outside of the pageview and it rendered correctly. For #2, if I do not use a template and just use the autogenerated edit fields, they render fine. I cannot find an instance for #3 where I can make it happen or not.
To be sure I did not have any CSS possibly affecting the textbox's height, I disabled all linked CSS files from the website.
Thanks,
Ron
Can you provide a live url or a sample runnable project via support ticket where the described issue can be observed? We will inspect / debug it locally and will get back to you with additional information.
Regards,
Pavlina
Telerik

I believe I have narrowed the issue down to the combination that is actually causing the abnormal height problem of the textboxes. I created a brand new page with no CSS or anything else accept for a radgrid with an edit template (using both asp and rad textboxes), radformdecorator (which indicated TextBox in the DecoratedControls), and radajaxmanager setup for ajaxifying the radgrid.
After several tests, these are the results I get when disabling and enabling various components (with true meaning the issue occurs):
-
ajaxified + rad textbox + form decorator = true
- ajaxified + asp textbox + form decorator = false
- ajaxified + rad textbox = false
- ajaxified + asp textbox = false
- rad textbox + form decorator = false
- asp textbox + form decorator = false
- rad textbox = false
- asp textbox = false
The only time I can reproduce the problem, which I can reproduce 100% of the times, is the very first combination. This is not just for textboxes in a radgrid either but also for textboxes in other pages affected with the combination of being ajaxified, a radtextbox and the formdecorator applying to TextBox in its decoratedcontrols property.
Can you reproduce this issue as well given the combination described?
My current solution would be to replace any textbox controls throughout the website converting them to a radtextbox. This is not too much of an issue as I do believe we utilize the radtextbox in almost all cases. Therefore I would simply need to remove the TextBox from the DecoratedControls property of the RadFormDecorator.
Thanks,
Ron
I tried to replicate the issue using the flowing code(as well as several more configurations):
ASPX:
<
telerik:RadFormDecorator
runat
=
"server"
DecoratedControls
=
"Textbox"
/>
<
telerik:RadAjaxManager
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"Panel0"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"Panel0"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
asp:Panel
runat
=
"server"
ID
=
"Panel0"
>
<
asp:Panel
runat
=
"server"
ID
=
"Panel1"
Visible
=
"false"
>
<
telerik:RadTextBox
runat
=
"server"
></
telerik:RadTextBox
>
<
telerik:RadTextBox
ID
=
"RadTextBox1"
runat
=
"server"
TextMode
=
"MultiLine"
></
telerik:RadTextBox
>
<
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"TextBox1"
></
asp:TextBox
>
<
asp:TextBox
runat
=
"server"
ID
=
"TextBox2"
TextMode
=
"MultiLine"
></
asp:TextBox
>
<
br
/>
<
telerik:RadTextBox
ID
=
"RadTextBox2"
runat
=
"server"
Height
=
"100px"
></
telerik:RadTextBox
>
<
telerik:RadTextBox
ID
=
"RadTextBox3"
runat
=
"server"
TextMode
=
"MultiLine"
Height
=
"100px"
></
telerik:RadTextBox
>
</
asp:Panel
>
<
asp:Button
runat
=
"server"
OnClick
=
"Unnamed_Click"
/>
</
asp:Panel
>
protected
void
Unnamed_Click(
object
sender, EventArgs e)
{
Panel0.FindControl(
"Panel1"
).Visible =
true
;
}
But on my side it is working as expected and the widths are applied correctly.
Could you try it out, and let us know what is different in your behaviour. Note that I have tested the grid inside an Edit Form of RadGrid, and they behaved the same way. You have said you can replicate it even without grid, so it is probably something that I am missing.
Regards,
Vasil
Telerik

I have tried updating to 2013.2.717 but it is still broken.
Since updating to this latest version, when I hover over the textboxes the width springs back to normal.
Here is an example of the textboxes not working for me - please help!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
.formitem {
margin-bottom: 3px
}
.formitem label, .leftblock {
display: block;
width: 50%;
text-align: right;
padding-right: 5px;
clear: left;
float: left;
line-height: 20px
}
.formitem input {
vertical-align: middle
}
.formblock {
border-top: solid 1px #CDCDDC;
padding: 10px 20px;
margin-left: auto;
margin-right: auto;
width: 300px
}
.midalign {
text-align: center
}
.midalign div, .midalign table {
margin-left: auto;
margin-right: auto
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"sm"
runat
=
"server"
EnableTheming
=
"True"
EnablePartialRendering
=
"True"
AllowCustomErrorsRedirect
=
"False"
>
</
telerik:RadScriptManager
>
<
telerik:RadFormDecorator
ID
=
"frmDecorate"
runat
=
"server"
DecoratedControls
=
"Default, Textbox, Textarea, Fieldset, Select"
/>
<
telerik:RadAjaxManager
ID
=
"mgrAjax"
runat
=
"server"
/>
<
asp:Panel
ID
=
"pnlLogin"
runat
=
"server"
DefaultButton
=
"btnContinue"
>
<
div
class
=
"formblock"
>
<
div
class
=
"formitem"
>
<
label
for='<%= txtUserID.ClientID %>_text'>User ID</
label
><
telerik:RadTextBox
ID
=
"txtUserID"
runat
=
"server"
Skin
=
""
Width
=
"130px"
/>
<
asp:RequiredFieldValidator
ID
=
"rfvUserID"
runat
=
"server"
ErrorMessage
=
"User ID is required"
ControlToValidate
=
"txtUserID"
Text
=
"*"
/>
</
div
>
<
div
class
=
"formitem"
>
<
label
for='<%= txtPassword.ClientID %>_text'>Password</
label
><
telerik:RadTextBox
ID
=
"txtPassword"
runat
=
"server"
Skin
=
""
Width
=
"130px"
TextMode
=
"Password"
/>
<
asp:RequiredFieldValidator
ID
=
"rfvPassword"
runat
=
"server"
ErrorMessage
=
"Password is required"
ControlToValidate
=
"txtPassword"
Text
=
"*"
/>
</
div
>
</
div
>
</
asp:Panel
>
<
div
class
=
"formitem midalign"
>
<
asp:Button
ID
=
"btnContinue"
runat
=
"server"
Text
=
"Continue"
/>
<
asp:Button
ID
=
"btnCancel"
runat
=
"server"
Text
=
"Cancel"
CausesValidation
=
"False"
/>
</
div
>
<
asp:ValidationSummary
ID
=
"vsErrors"
runat
=
"server"
/>
</
form
>
</
body
>
</
html
>

To explore the reason of the problem, i created a new Telerik-Projekt an copy the code step by step into the new project. It runs fine. No problems any more. I think the reason could be in the web.config or in the order of declaring the different Managers.
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
</telerik:RadWindowManager>
If I found the reason, i will publish it.
Stefan

Legacy CSS code needed to correct an earlier RadAjax issue.
Find and remove anything that looks like:
span.riSingle .riLabel
{
margin-right: 5px;
overflow: hidden;
width: auto !important;
}
.riSingle
{
width: auto !important;
}

You can read more information from the link below :
http://blogs.telerik.com/aspnet-ajax/posts/12-06-22/changes-in-radinput-in-q2-2012-version-of-radcontrols.aspx

span.RadInputRTL {
padding-left: 0;
}
for more information visit http://www.telerik.com/community/forums/aspnet-ajax/input/radtextbox-padding-left-22px.aspx