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

RadTextBox Width Not Working After Upgrade

20 Answers 354 Views
Input
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 2
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

Sort by
0
Pavlina
Telerik team
answered on 26 Feb 2013, 10:12 AM
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.
0
JDP
Top achievements
Rank 1
answered on 08 May 2013, 01:47 PM
I had the same issue and have not found a resolution yet other then setting the width to a set Pixel width.   Whereas in my case I had to change Width="60%" to Width="550px" 

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.
0
Pavlina
Telerik team
answered on 09 May 2013, 01:41 PM
Hi,

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
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
Vijay
Top achievements
Rank 1
answered on 13 May 2013, 08:32 PM
Hi,

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



0
JDP
Top achievements
Rank 1
answered on 14 May 2013, 12:09 PM
Sorry, as it turns out it was IE 8.0 and not 7.0.
0
Pavlina
Telerik team
answered on 16 May 2013, 09:52 AM
Hello,

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
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
Rajesh Kumar
Top achievements
Rank 1
answered on 10 Jun 2013, 05:51 AM
Hello,
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
0
Pavlina
Telerik team
answered on 13 Jun 2013, 07:25 AM
Hi 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
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.
0
Kevin Calhoun
Top achievements
Rank 1
answered on 19 Jun 2013, 06:24 PM
I have download Q2 2013 release of AJAX controls and this is still occurring.
0
Ron
Top achievements
Rank 2
answered on 20 Jun 2013, 06:02 PM
I have also downloaded the latest version and the problem still persists.  However, not only are the textboxes having the width issue but now the height of the textboxes (some not all) is about an extra 50% than what they should be.  I have seen this new behavior even with the advanced pager in the radgrids as well.  I am using IE9 right now to test.

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.
0
Vasil
Telerik team
answered on 21 Jun 2013, 08:41 AM
Hello,

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
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.
0
Ron
Top achievements
Rank 2
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

0
Pavlina
Telerik team
answered on 26 Jun 2013, 01:45 PM
Hello 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
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.
0
Ron
Top achievements
Rank 2
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

0
Vasil
Telerik team
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>
C#
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
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.
0
Dan Ware
Top achievements
Rank 1
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">
  
<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>
0
Stefan
Top achievements
Rank 2
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
0
Richard
Top achievements
Rank 2
answered on 20 Nov 2013, 07:56 PM
Found it.   At least in my projects.
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;
}
0
Mahdy
Top achievements
Rank 1
answered on 07 Jan 2014, 09:29 PM
This is an another solution: Just set "EnableSingleInputRendering" property of radtextbox to false.
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

0
Mahdy
Top achievements
Rank 1
answered on 08 Jan 2014, 06:48 PM
If you have a problem when use RTL direction, you can fix width problem by add following css class:
span.RadInputRTL {
            padding-left: 0;
        }

for more information visit http://www.telerik.com/community/forums/aspnet-ajax/input/radtextbox-padding-left-22px.aspx
Tags
Input
Asked by
Ron
Top achievements
Rank 2
Answers by
Pavlina
Telerik team
JDP
Top achievements
Rank 1
Vijay
Top achievements
Rank 1
Rajesh Kumar
Top achievements
Rank 1
Kevin Calhoun
Top achievements
Rank 1
Ron
Top achievements
Rank 2
Vasil
Telerik team
Dan Ware
Top achievements
Rank 1
Stefan
Top achievements
Rank 2
Richard
Top achievements
Rank 2
Mahdy
Top achievements
Rank 1
Share this question
or