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

RadTextBox changes size

7 Answers 186 Views

FormDecorator

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

Sam asked on 06 Aug 2013, 10:28 PM

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>

7 Answers, 1 is accepted

answered on 06 Aug 2013, 10:29 PM

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>

answered on 07 Aug 2013, 05:24 PM

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>

answered on 08 Aug 2013, 03:20 PM

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

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.

answered on 08 Aug 2013, 05:35 PM

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