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

Buttons and TextBoxes are not rendered correctly in IE6 / IE7 when styled with RadFormDecorator (Q2 2010)

6 Answers 189 Views

FormDecorator

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

6 Answers, 1 is accepted

answered on 25 Jan 2011, 10:45 AM

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...

answered on 27 Jan 2011, 03:43 PM

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.

answered on 09 Feb 2011, 08:45 PM

<%@ 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>

<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.

answered on 14 Feb 2011, 12:18 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Buttons and TextBoxes are not rendered correctly in IE6 / IE7 when styled with RadFormDecorator (Q2 2010)

6 Answers, 1 is accepted