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

IE 7.0 Rad Textbox under Rad Tab Strip is not maintaing width

5 Answers 47 Views
Input
This is a migrated thread and some comments may be shown as answers.
mosswgreentea
Top achievements
Rank 1
mosswgreentea asked on 22 Mar 2012, 10:58 PM
I've noticed that when we have 2 tabs in a form and have rad textbox controls on both tabs, the tab that is not in focus has controls with different widths than specified in the markup. This is happening in IE 7.0. I have confirmed that this is working properly on all other browsers.

I've attached the source code below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="RadControlsWebApp1.WebForm3" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <style type="text/css">
        body
        {
            font-family: Arial, Helvetica, Sans-Serif;
            font-size: 11pt;
            color: Black;
        }
         
        div.MasterContainer
        {
            width: 600px;
            height: 400px;
            padding: 0px;
            margin: auto;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <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>
    <div class="MasterContainer">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
            SelectedIndex="0" Skin="Hay" Width="100%">
            <Tabs>
                <telerik:RadTab runat="server" Text="Tab1" Value="Tab1" Owner="RadTabStrip1" PageViewID="rpvTab1"
                    />
                <telerik:RadTab runat="server" Text="Tab2" Value="Tab2" Owner="RadTabStrip1" PageViewID="rpvTab2" />
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="rpvTab1" runat="server" Width="100%" >
                <table style="padding: 0px; margin: 0px; border-style: none; border-width: 0px; width: 500px;">
                    <tr>
                        <td>
                            Title:
                        </td>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox1" runat="server" Enabled="true" MaxLength="100" Text="Test"
                                Width="240px">                               
                            </telerik:RadTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Gender:
                        </td>
                        <td>
                            <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Choose Gender"
                                Width="240px">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Text="Male" Value="Male" />
                                    <telerik:RadComboBoxItem runat="server" Text="Female" Value="Female" />
                                </Items>
                            </telerik:RadComboBox>
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvTab2" runat="server" Width="100%">
                <table style="padding: 0px; margin: 0px; border-style: none; border-width: 0px; width: 500px;">
                    <tr>
                        <td>
                            Title:
                        </td>
                        <td>
                            <telerik:RadTextBox ID="txtTitle" runat="server" Enabled="true" MaxLength="100" Text="Test"
                                Width="240px">                               
                            </telerik:RadTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Gender:
                        </td>
                        <td>
                            <telerik:RadComboBox ID="cmbxGender" runat="server" EmptyMessage="Choose Gender"
                                Width="240px">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Text="Male" Value="Male" />
                                    <telerik:RadComboBoxItem runat="server" Text="Female" Value="Female" />
                                </Items>
                            </telerik:RadComboBox>
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    </form>
</body>
</html>


5 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 27 Mar 2012, 12:43 PM
Hi Arvind,

It is an already known problem and is reported to our developers.

In the meantime, could you use the following CSS workaround

* + html div.MasterContainer .riSingle .riTextBox
{
    width: 228px !important;
}

I hope this helps.

Greetings,
Galin
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
Chris
Top achievements
Rank 1
answered on 26 Apr 2012, 04:20 PM
disregard: I had a bug in my javascript that caused the page to stop rendering everything under the hood
0
Patrick Culp
Top achievements
Rank 1
answered on 10 Aug 2012, 07:06 PM
I have the same problem and I've tried to use:

* + html div.MasterContainer .riSingle .riTextBox
{
    width228px !important;
}

...and it does ensure that the widths are maintained when switching tabs.  But, what if I have a control that needs to be a different width?
0
Galin
Telerik team
answered on 15 Aug 2012, 01:32 PM
Hi Patrick,

At this time, you should fix the width with !important or set the property EnableSingleInputRendering to false.

I hope this helps.


Greetings,
Galin
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
Patrick Culp
Top achievements
Rank 1
answered on 15 Aug 2012, 08:54 PM
Ah, perfect.  I set all the controls within the tabs that were losing their widths to EnableSingleInputRendering=False and removed the css.  Works much better now.  Thank you.
Tags
Input
Asked by
mosswgreentea
Top achievements
Rank 1
Answers by
Galin
Telerik team
Chris
Top achievements
Rank 1
Patrick Culp
Top achievements
Rank 1
Share this question
or