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

6 posts, 0 answers
  1. mosswgreentea
    mosswgreentea avatar
    10 posts
    Member since:
    Dec 2009

    Posted 22 Mar 2012 Link to this post

    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>


  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 27 Mar 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    2 posts
    Member since:
    Sep 2011

    Posted 26 Apr 2012 Link to this post

    disregard: I had a bug in my javascript that caused the page to stop rendering everything under the hood
  5. Patrick Culp
    Patrick Culp avatar
    2 posts
    Member since:
    Feb 2009

    Posted 10 Aug 2012 Link to this post

    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?
  6. Galin
    Admin
    Galin avatar
    526 posts

    Posted 15 Aug 2012 Link to this post

    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.
  7. Patrick Culp
    Patrick Culp avatar
    2 posts
    Member since:
    Feb 2009

    Posted 15 Aug 2012 Link to this post

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