RadTextBox changes size

[Sam]

I’m

experiencing a very strange behavior from Textboxes that are using the

RadFormDecorator. When the page opens, the text boxes look great, but when I

move the mouse on top of them, they change their size. Thanks for the help,

-Sam


<%@ Page Title="Edit Category" Language="VB" MasterPageFile="~/Application/MasterPage2.master"  AutoEventWireup="false" CodeFile="CategoryEdit.aspx.vb" Inherits="Application_CategoryEdit" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">

    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Metro">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2"
        EnablePageHeadUpdate="False">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="SubmitButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="SubmitButton" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div style="font-size: .9em">
        <telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="MultiPage" SelectedIndex="0"
            Skin="Outlook">
            <Tabs>
                <telerik:RadTab runat="server" PageViewID="GeneralPage" Text="General Information"
                    Value="GeneralTab" Selected="True">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="DetailPage" Text="Forecast Details" Value="DetailTab">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="MultiPage" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="GeneralPage" runat="server" Selected="true">
                <table>
                    <tr>
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            Category Name
                        </td>
                        <td>
                            <telerik:RadTextBox ID="NameTextBox" runat="server" Skin="" Width="350px">
                            </telerik:RadTextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="NameTextBox"
                                Display="Dynamic" ErrorMessage="Category name is required" Text="<img alt='Information required' src='../Images/Error.gif' />">
                            </asp:RequiredFieldValidator>
                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            Description
                        </td>
                        <td>
                            <telerik:RadTextBox ID="DescriptionTextBox" runat="server" Skin="" Width="350px">
                            </telerik:RadTextBox>
                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            Unit of Measurement
                        </td>
                        <td>
                            <telerik:RadComboBox ID="UOMComboBox" runat="server">
                            </telerik:RadComboBox>
                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="DetailPage" runat="server">
                <table width="100%">
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <table class="BottomTable">
            <tr>
                <td>
                    <asp:Button ID="SubmitButton" runat="server" Text="Submit" CommandName="Submit" />
                </td>
                <td style="text-align: right">
                    <asp:Button ID="CancelButton" runat="server" Text="Cancel" CommandName="Cancel" OnClientClick="return CancelAll();" />
                </td>
            </tr>
        </table>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" HeaderText="Please Submit All Required Information"
            ShowMessageBox="True" ShowSummary="False" />
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            //***********************************************************************************************
            function CloseAndRebind(Msg, CatID) {
                GetRadWindow().Close();
                GetRadWindow().BrowserWindow.CategoryEdit_Completed(CatID);
            }

            function AlertAndClose(args) {
                alert(args);
                GetRadWindow().Close();
            }

            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow;
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                return oWindow;
            }

            function CancelAll() {
                GetRadWindow().Close();
            }

            //***********************************************************************************************
        </script>
    </telerik:RadCodeBlock>
</asp:Content>

<%@ Master Language="VB" CodeFile="MasterPage2.master.vb" Inherits="Application_MasterPage2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>2forecast</title>

    <link href="../StyleSheet.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder id="head" runat="server">

    </asp:ContentPlaceHolder>

</head>

<body class="BodyStyle5">

    <form id="form1" runat="server">

    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

    </telerik:RadStyleSheetManager>

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

    </telerik:RadScriptManager>

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox"

        Skin="Outlook" />

    <div style="font-size: .85em;">

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

    </div>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Silk" Modal="True"

        Overlay="True" ShowContentDuringLoad="False" VisibleStatusbar="False" ReloadOnShow="True"

        IconUrl="~/Images/2Forecast_16.png" KeepInScreenBounds="true" AutoSize="False"

        Behaviors="Resize, Close, Maximize, Move, Reload" EnableShadow="True" Style="z-index: 9000">

        <Windows>

            <telerik:RadWindow ID="SmallSizeDialog" Title="" runat="server" Height="300px" Width="700px">

            </telerik:RadWindow>

            <telerik:RadWindow ID="MidSizeDialog" Title="" runat="server" Height="500px" Width="700px">

            </telerik:RadWindow>

            <telerik:RadWindow ID="LargeSizeDialog" Title="" runat="server" Height="700px" Width="900px">

            </telerik:RadWindow>

        </Windows>

    </telerik:RadWindowManager>

    </form>

</body>

</html>

[Sam]

Here is the Master page:

<%@ Master Language="VB" CodeFile="MasterPage2.master.vb" Inherits="Application_MasterPage2" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>2forecast</title>
    <link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body class="BodyStyle5">
    <form id="form1" runat="server">
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox"
        Skin="Outlook" />
    <div style="font-size: .85em;">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Silk" Modal="True"
        Overlay="True" ShowContentDuringLoad="False" VisibleStatusbar="False" ReloadOnShow="True"
        IconUrl="~/Images/2Forecast_16.png" KeepInScreenBounds="true" AutoSize="False"
        Behaviors="Resize, Close, Maximize, Move, Reload" EnableShadow="True" Style="z-index: 9000">
        <Windows>
            <telerik:RadWindow ID="SmallSizeDialog" Title="" runat="server" Height="300px" Width="700px">
            </telerik:RadWindow>
            <telerik:RadWindow ID="MidSizeDialog" Title="" runat="server" Height="500px" Width="700px">
            </telerik:RadWindow>
            <telerik:RadWindow ID="LargeSizeDialog" Title="" runat="server" Height="700px" Width="900px">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    </form>
</body>
</html>

[A2H]

Hello,

Please check this thread which discuss the same scenario.

Thanks,
A2H

[Sam]

Thank you for the help. I added the below code and still have the same issue:

<telerik:RadCodeBlock ID="CodeBlock" runat="server">
      <script type="text/javascript">
          //***********************************************************************************************| Fix Rounded and length of TextBoxes
          var oldIsApplicableToUnifyWidth = Telerik.Web.UI.RadFormDecorator.prototype.isApplicableToUnifyWidth;

          Telerik.Web.UI.RadFormDecorator.prototype.isApplicableToUnifyWidth = function (element) {
              return oldIsApplicableToUnifyWidth.apply(this, arguments) && (!this.ancestorWithCssClass(element, "RadInput"));
          };

          Telerik.Web.UI.RadFormDecorator.prototype.ancestorWithCssClass = function (element, className) {
              var parent = element.parentNode;
              while (parent.tagName) {
                  if (Sys.UI.DomElement.containsCssClass(parent, className))
                      return parent;

                  parent = parent.parentNode;
              }

              return null;
          };

          //***********************************************************************************************|
      </script>
  </telerik:RadCodeBlock>

[Danail Vasilev]

Hi Sam,

The described issue has already been logged in our feedback portal here, so that you can monitor, comment or raise its priority by voting on it.

The workaround is to set the 'rfdRoundedCorners' and 'rfdDecorated' as classes to the RadInput. For example:

<telerik:RadTextBox ID="RadTextBox1" runat="server" Text="RadTextBox1" Skin="" CssClass="rfdRoundedCorners rfdDecorated">
</telerik:RadTextBox>

Regards,
Danail Vasilev
Telerik

[Sam]

Danail,

Thank you for the help and the recommended solution; however, this cannot be acceptable because the solution touches every TextBox. At the same time, the rounded corners are very, very important, and i hope you guys really understand that issue. The softness of the user interface is extremely important specially when the users are already technology shy.

We will not use the new DLLs until this issue is resolved. We understand with the complexity of what you are providing us that we will encounter these anomalies, but I hope this issue is resolved very soon.

Thank you,
-Sam

[Danail Vasilev]

Hi Sam,

Please accept our apologies for the caused inconvenience.

The priority of this issue has been raised, so that if everything is fine it may be fixed in the upcoming Q3 2013 which is scheduled for the middle of October.

Regards,
Danail Vasilev
Telerik

[Sam]

Well done Danial, that's the way - thank you.

-Sam