TextBox Width Extending When String Is Long in IE8

7 posts, 0 answers
  1. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 02 Jun 2010 Link to this post

    Hi,

    I have textboxes and my entire site is using RadFormControl. The problem is when I type a long string in a textbox, the width of the textbox elongate until it shows all the string. Thus affecting the width and position of the controls beside it. The width of my textboxes are set to 100% since my layout is fluid.

    The problem only happens in IE8. I tried using Chrome and it does NOT elongate and works just fine. Thanks
  2. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 06 Jun 2010 Link to this post

    anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 07 Jun 2010 Link to this post

    Hi Arnold Castro,

    Unfortunately we do not support width: 100% for RadFormDecorator control. We will try to fix that in a future release. It works fine in Chrome, Safari and Firefox as for these browsers we have different HTML rendering. We use CSS3 border-radius property to have rounded corners, while in IE the input element is wrapped in a table, that imitate the rounded corners.

    I would suggest not to decorate these input elements if you still want to have fluid layouts.

    Regards,
    Bojo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 07 Jun 2010 Link to this post

    is there any workaround on this? all my forms are using radformdecorator and its too late at this stage to roll them back. I decided to use radformdecorator because it says in the documentation that it supports cross browser. I also haven't read any warning that says it doesn't support 100% width. I hope we can do something about it...i want to make my pages look consistent and removing radformdecorator in my entire site is not a good solution instead it will introduce more UI conflicts in my site. 
  6. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 08 Jun 2010 Link to this post

    Hi Arnold,

    The problem is, that Internet Explorer does not support width of 100%. I would suggest you to use JavaScript, that will detect when Internet Explorer is used. Then you could attach a handler method to the "load" event of the Sys.Application class (i.e. use Sys.Application.add_load(handlerMethod) to attach the method) and calculate the width of the respective <input /> in pixels according to the main wrapping element.

    Greetings,
    Bojo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 08 Jun 2010 Link to this post

    Hi Bojo,

    Thank you for your response. 

    "Internet Explorer does not support 100% width" - I'm pretty sure that when you try to style a normal textbox with 100%, it will work just fine in IE/IE8. So IE is not actually the problem. I think that the problem is that RadFormDecorated-textboxes are not compatible IE8. However this cannot be a limitation of the product since in the overview of RadFormDecorator it says that:

    Wide Cross-Browser Support
    The component supports all major browsers, including IE, Firefox, Google Chrome, Opera and Safari.

     "Unfortunately we do not support width: 100% for RadFormDecorator control." -  its weird to me that the RadFormDecorator 100% width is supported all major browser but not IE. Again, for me it looks like it is a Cross-Browser issue more than an IE8 issue or Product limitation.

    Anyway may I request a sample code for the workaround that you have mentioned?




  8. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 09 Jun 2010 Link to this post

    Hello Arnold,

    Please, find bellow a JavaScript solution that extends text box in IE to 100% of the wrapping element.

    <!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">
            .RadForm.rfdTextbox input[type="text"]
            {
                width: 100%;
            }
        </style>
        <script type="text/javascript">
            function pageLoad()
            {
                if ($telerik.isIE && !$telerik.isIE9)
                {
                    var allInputsTypeText = $telerik.$("input[type='text']");
                    //debugger;
                    allInputsTypeText.each(function(index, inputText)
                    {
                        var tblesParent = $telerik.$(inputText).parents(".rfdRoundedWrapper:first").parent(); // Table
                        var parentSize = $telerik.getContentSize(tblesParent.get(0)); // Size of the parent element
                        $telerik.setSize(inputText, { width: parentSize.width, height: $telerik.getContentSize(inputText).height + 4 });
                    });
                }
                // else
                //   FF, IE9 etc.
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" 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>
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox, Textarea,Buttons,Scrollbars" />
        <div style="width: 450px;">
            <asp:TextBox runat="server" ID="input100" />
        </div><br />
        <div style="width: 750px;">
            <asp:TextBox runat="server" ID="TextBox1" />
        </div><br />
        <div style="width: 100%;">
            <asp:TextBox runat="server" ID="TextBox2" />
        </div>
        </form>
    </body>
    </html>

    The CSS code on the top will work for all non IE browsers.
    The JavaScript after the CSS will work for Internet Explorer and will resize the textbox to 100%.

    Please, find ietextboxfixed.gif, showing the result in IE in three different situations:

    1. The width of wrapping element is set to 450px;
    2. The width of wrapping element is set to 750px;
    3. The width of wrapping element is set to100%;
    In all three situations the textbox is extended to the width of its wrapping element.

    I hope this will work fine for you.

    Sincerely yours,
    Bojo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017