This is a migrated thread and some comments may be shown as answers.

RadTextBox Width Not Working After Upgrade

20 Answers 472 Views

Input

This is a migrated thread and some comments may be shown as answers.

Ron asked on 21 Feb 2013, 06:04 AM

Hello,

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

answered on 26 Feb 2013, 10:12 AM

textbox-width.zip

Hi Ron,

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

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.

answered on 21 Jun 2013, 09:25 PM

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

answered on 26 Jun 2013, 02:12 PM

Hi Pavlina,

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

answered on 28 Jun 2013, 01:47 PM

Hello 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

answered on 19 Jul 2013, 11:24 AM

I am still getting problems with textbox width in IE 7 and 8 (on Windows XP) - it was all OK before the 2013 versions.

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>

</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>

answered on 08 Nov 2013, 09:44 PM

I have had the same problems. The origin ASP-Project (framework 4.0) was developed under VS 2010 with the Telerik-Tools (Q3 2013). But the tools has been implemented into the existing Project. After upgrading the project to VS2013 the Width-Declaration with % doesn't work. The absolute declaration with px still works. It doesn't matter which browser runs the site. If you debug the site with firebug, you will see, that there are no declartion of Width and Height if you have used the %-Attribut, otherwise the declaration is visible in firebug.
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