RadTextBox changes size

8 posts, 0 answers
  1. Sam
    Sam avatar
    50 posts
    Member since:
    Apr 2008

    Posted 06 Aug 2013 Link to this post

    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">
     
    <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>
  2. Sam
    Sam avatar
    50 posts
    Member since:
    Apr 2008

    Posted 06 Aug 2013 Link to this post

    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">
     
    <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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 06 Aug 2013 Link to this post

    Hello,

    Please check this thread which discuss the same scenario.

    Thanks,
    A2H
  5. Sam
    Sam avatar
    50 posts
    Member since:
    Apr 2008

    Posted 07 Aug 2013 Link to this post

    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>
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 08 Aug 2013 Link to this post

    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.
  7. Sam
    Sam avatar
    50 posts
    Member since:
    Apr 2008

    Posted 08 Aug 2013 Link to this post

    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
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 13 Aug 2013 Link to this post

    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
    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.
  9. Sam
    Sam avatar
    50 posts
    Member since:
    Apr 2008

    Posted 13 Aug 2013 Link to this post

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

    -Sam
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017