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

TextBox Width Extending When String Is Long in IE8

6 Answers 87 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Web team
Top achievements
Rank 1
Web team asked on 02 Jun 2010, 10:35 AM
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

6 Answers, 1 is accepted

Sort by
0
Web team
Top achievements
Rank 1
answered on 07 Jun 2010, 03:08 AM
anyone?
0
Bozhidar
Telerik team
answered on 07 Jun 2010, 09:12 AM
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.
0
Web team
Top achievements
Rank 1
answered on 08 Jun 2010, 02:11 AM
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. 
0
Bozhidar
Telerik team
answered on 08 Jun 2010, 01:27 PM
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.
0
Web team
Top achievements
Rank 1
answered on 09 Jun 2010, 03:24 AM
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?




0
Bozhidar
Telerik team
answered on 09 Jun 2010, 11:34 AM
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.
Tags
FormDecorator
Asked by
Web team
Top achievements
Rank 1
Answers by
Web team
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or