Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > FormDecorator > Buttons and TextBoxes are not rendered correctly in IE6 / IE7 when styled with RadFormDecorator (Q2 2010)

• Telerik Admin Master

  Posted on Jul 14, 2010 (permalink)

  In Q2 2010 release, there is a known issue in IE6 and IE7 concerning the decoration of input elements (button and textbox).
  
  To avoid the alignment problem, put the following CSS code in the head section of your page:
  
  

  <style type="text/css">

      *html .rfdDecorated,

      *html a.rfdSkinnedButton,

      {

          vertical-align: top!important;

      }

        

      *+html .rfdDecorated,

      *+html a.rfdSkinnedButton

        

      {

          vertical-align: top!important;

      }

  </style>

  
  
  This problem will not exist in Q2 2010 SP1.
  
  We apologize for the inconvenience.

  Reply

• Patrik Johansson Master

  Posted on Jan 25, 2011 (permalink)

  We are having problems with rendering of buttons in IE8 (but no other browser as it seems), when the mouse pointer is placed above (mouseover), the button suddenly gets about 30% wider, which looks really strange. When moving the mouse pointer off the button, it returns to correct size. Have not been able to solve this, any ideas? We have another web application build almost identicaly that does not expose this problem strangly enough, but we can't find the cause of it. We are using DotNetNuke by the way if that matters and the latest Telerikversion (2010.3.1317.40).
  
  Not sure if it is related, but we have also noticed that in FireFox, the RadLoadingPanel often gets placed in the wrong place when a page expands, mainly when the hight of the pages i increased due to more data being displayed. This problem only occurs in FireFox though.
  
  It seems to be some kind of rendering problem, might be the same in both cases.
  
  Edit:
  Some additional info. It is not only the button that is rendered strange on mouse over, the entire row rerenders, making it look like it "blinks". When specifying ItemStyle:
  
          <telerik:GridEditCommandColumn ButtonType="PushButton"
              FilterControlAltText="Filter EditCommandColumn column">
              <ItemStyle Width="200px" />
  
  The row will stop "blinking", but the button will still rerender itself wider on mouse over.
  
  I have a distinct feeling of having solved this before with a workaround, can't remember how though...

  Reply


• Patrik Johansson Master

  Posted on Jan 25, 2011 (permalink)

  Ok, follow up on this. It seems what is happening is that IE/Telerik for some reason moves the label of the button to the right on mouseover, which cause the button to resize, unless you specify a size large enough to begin with to fit even when the text is moved to the right, in which case only the text in the button is moved but the row won't "blink".
  
  Any ideas?

  Reply

• Bozhidar Bozhidar

  Posted on Jan 27, 2011 (permalink)

  Hi Patrick,
  
  Without an image or code sample provided it is hard to reproduce the issue locally. You are also saying that you have two different application and only on of them is experiencing the problem.
  
  On hover, the label should not move, or the button width should not be changed, could you provide us a sample code that reproduces the issue or at least an image that shows it?
  
  I suppose that the problem could be caused by an external CSS file loaded to your applications that sets some unwanted styles to the button and makes it to behave like that. However I will a way to reproduce the problem to be able to investigate it and to ensure if it is a bug in the control or not.
  
  
  All the best,
  Bojo
  the Telerik team

  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.

  Reply

• Patrik Johansson Master

  Posted on Feb 3, 2011 (permalink)

  Update: it seems like this problem was caused by a very badly behaving DotNetNuke skin. Naturally, this was something we tried changing early on in our error searching by using the "skin preview" function in DotNetNuke, but for some strange reason, that did not change anything with regards to this problem, even though it applied the new skin to the page. When we really changes the skin, it started working as it should.
  

  Reply

• Jeffrey

  Posted on Feb 9, 2011 (permalink)

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="VendorMaintenanceForm.aspx.cs"

      Inherits="VendorMaintenanceForm" Title="Vendor Maintenance" %>

    

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

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

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

      <title>Account Details</title>

  </head>

  <body>

        

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

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

      <telerik:RadFormDecorator runat="server" DecoratedControls="All" ID="RD" />

      <script type="text/javascript">

          function CloseAndRebind(args) {

              GetRadWindow().BrowserWindow.refreshGrid(args);

              GetRadWindow().close();

          }

    

          function GetRadWindow() {

              var oWindow = null;

              if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog

              else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

    

              return oWindow;

          }

    

          function CancelEdit() {

              GetRadWindow().close();

          }

      </script>

      <!-- Container -->

      <div>

        <style type="text/css">

          .labelFont

            {

                font-family: Calibri;

                font-size: 13px;

            }

        </style>

          <asp:Panel ID="TablePanel" runat="server">

              <%--CONTENT--%>

              <table>

                  <tr>

                      <td>

                          <asp:Label ID="lblVendorName" runat="server" Text="Vendor Name:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtVendorName" runat="server" Width="250px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtVendorName" ErrorMessage="Vendor Name Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                      <td>

                          <asp:Label ID="lblAcctNo" runat="server" Text="Account No:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtAcctNo" runat="server" Width="150px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtAcctNo" ErrorMessage="Account No Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblAddress1" runat="server" Text="Address 1:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtAddress1" runat="server" Width="250px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAddress1" ErrorMessage="Address 1 Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblAddress2" runat="server" Text="Address 2:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtAddress2" runat="server" Width="250px"/>

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblCity" runat="server" Text="City:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtCity" runat="server" Width="200px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtCity" ErrorMessage="City Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                   </tr>

                   <tr>

                      <td>

                          <asp:Label ID="lblState" runat="server" Text="State:" CssClass="labelFont" />

                      </td>

                      <td>

                          <telerik:RadComboBox ID="cboState" runat="server" Width="200px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="cboState" ErrorMessage="State Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                      <td>

                          <asp:Label ID="lblPostalCode" runat="server" Text="Postal Code:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtPostalCode" runat="server" Width="75px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtPostalCode" ErrorMessage="Postal Code Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                  </tr>

                  <tr>

                      <td colspan="4">

                          <hr />

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblVendorContact" runat="server" Text="Vendor Contact:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtVendorContact" runat="server" Width="250px"/>

                          <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtVendorContact" ErrorMessage="Vendor Contact Required" 

                              EnableClientScript="true" Display="Dynamic"  />

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblPhone1" runat="server" Text="Contact Phone:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtPhone1" runat="server" Width="100px"/>

                      </td>

                      <td>

                          <asp:Label ID="lblFax" runat="server" Text="Contact Fax:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtFax" runat="server" Width="100px"/>

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblEmail" runat="server" Text="Contact Email:" CssClass="labelFont" />

                      </td>

                      <td>

                          <asp:TextBox ID="txtEmail" runat="server" Width="150px"/>

                      </td>

                  </tr>

                  <tr>

                      <td colspan="4">

                          <hr />

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblCreateDte" runat="server" Text="Create Date:" CssClass="labelFont" />

                      </td>

                      <td>

                          <telerik:RadDatePicker ID="dteCreateDate" runat="server" AutoPostBack="true" EnableViewState="true" CausesValidation="false"/>

                      </td>

                      <td>

                          <asp:CheckBox ID="ckAccountIsActive" runat="server" Text="Active" />

                      </td>

                  </tr>

                  <tr>

                      <td>

                          <asp:Label ID="lblVendorComments" runat="server" Text="Vendor Comments:" CssClass="labelFont" />

                      </td>

                      <td colspan="3">

                          <asp:TextBox ID="txtComments" runat="server"/>

                      </td>

                  </tr>

              </table>

            </asp:Panel>

            <asp:Panel ID="BtnPanel" runat="server" Style="float: left;">

              <asp:Button runat="server" ID="btnVMSave" Text="Save" Width="100px"/>  

              <asp:Button runat="server" ID="btnVMCancel" Text="Cancel" CausesValidation="false"  Width="100px"/>

            </asp:Panel>

      </div>

    </form>

  </body>

  </html>

  I have this exact problem and can't seem to overcome it.  The text of the button moves right on hover.

  Reply

• Bozhidar Bozhidar

  Posted on Feb 14, 2011 (permalink)

  Hi Jeffrey,
  
  I have tested your code with IE and Firefox and I don`t experience the reported issue where button moves right on hover. Take a look at the last message in this thread before your post from Patrik Johansson where he says that such e behavior was caused by very badly behaving DotNetNuke skin.
  
  If you could isolate the issue in a small sample separate project, just send to us and we will investigate it further, but from what I have tested I don`t think that the problem comes from RadFormDecorator, but from an external resource such as CSS file or the previously reported DotNetNuke skin.
  
  Greetings,
  Bojo
  the Telerik team

  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > FormDecorator > Buttons and TextBoxes are not rendered correctly in IE6 / IE7 when styled with RadFormDecorator (Q2 2010)