RadTextBox Width Not Working After Upgrade

21 posts, 0 answers
  1. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 21 Feb 2013 Link to this post

    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
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 26 Feb 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JDP
    JDP avatar
    14 posts
    Member since:
    Mar 2008

    Posted 08 May 2013 Link to this post

    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.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 09 May 2013 Link to this post

    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.
  6. Vijay
    Vijay avatar
    6 posts
    Member since:
    Mar 2012

    Posted 13 May 2013 Link to this post

    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



  7. JDP
    JDP avatar
    14 posts
    Member since:
    Mar 2008

    Posted 14 May 2013 Link to this post

    Sorry, as it turns out it was IE 8.0 and not 7.0.
  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 May 2013 Link to this post

    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.
  9. Rajesh Kumar
    Rajesh Kumar avatar
    4 posts
    Member since:
    Oct 2012

    Posted 10 Jun 2013 Link to this post

    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
  10. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Jun 2013 Link to this post

    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.
  11. Kevin Calhoun
    Kevin Calhoun avatar
    1 posts
    Member since:
    Jan 2009

    Posted 19 Jun 2013 Link to this post

    I have download Q2 2013 release of AJAX controls and this is still occurring.
  12. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 20 Jun 2013 Link to this post

    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.
  13. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 21 Jun 2013 Link to this post

    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.
  14. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 21 Jun 2013 Link to this post

    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

  15. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 26 Jun 2013 Link to this post

    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.
  16. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 26 Jun 2013 Link to this post

    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

  17. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 28 Jun 2013 Link to this post

    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.
  18. Dan Ware
    Dan Ware avatar
    17 posts
    Member since:
    Mar 2010

    Posted 19 Jul 2013 Link to this post

    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>
  19. Stefan
    Stefan avatar
    2 posts
    Member since:
    Apr 2013

    Posted 08 Nov 2013 Link to this post

    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
  20. Richard
    Richard avatar
    21 posts
    Member since:
    Dec 2007

    Posted 20 Nov 2013 Link to this post

    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;
    }
  21. Mahdy
    Mahdy avatar
    6 posts
    Member since:
    Aug 2012

    Posted 07 Jan 2014 Link to this post

    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

  22. Mahdy
    Mahdy avatar
    6 posts
    Member since:
    Aug 2012

    Posted 08 Jan 2014 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017