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

asp:Button with RadFormDecorator not working in FireFox 2.x

7 Answers 159 Views

FormDecorator

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

Mounir Maghraoui asked on 16 Mar 2010, 05:29 PM

Hi,
I'm using Telerik version 2009.31208.20. I have created an asp:button decorated with the Telerik RadFormDecorator. The button works well in IE (all version after IE 6), FireFox 3.x, Chrome and Safari. Although, in Firefox 2.x, the button click is not firing and its border is cut off.
The problem occurs only when i set the button decorated with the RadFormDecorator.
I found the same problem in the Telerik website http://demos.telerik.com/aspnet-ajax/formdecorator/examples/decorationzoneid/defaultcs.aspx. I have joined to this post a snapshot from the Telerik website.
Thanks.
here the source code:

    
             <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All" 
            
                    Skin="WebBlue"></telerik:RadFormDecorator> 
            
             <asp:Button ID="LoginButton" ValidationGroup="login" 
            
                  runat="server" CommandName="Login" Width="120px" 
            
                  Text="<%$ Resources:Labels, LoginLoginButton %>" />

7 Answers, 1 is accepted

Accepted

answered on 19 Mar 2010, 02:36 PM

bug-ff2-x.png

Hi Georgi,
Your suggestion of setting UseSubmitBehavior=false for the button works well. Thank you for help!
Now, still the button border cut off as in the attached file.
Is there a way to fix it ?
kind regards,
Mounir

Accepted

answered on 19 Mar 2010, 03:59 PM

Hi Mounir,

We are aware of this problem. It is caused by the lack of support for the display: inline-block CSS property / value in that version of FireFox. When FF3 was released, they implemented this mode (which is in fact a standard CSS2 value), which allowed us to drop a couple of vendor-specific (-moz-properties) that we used to emulate this behavior. What you can do is to set the following CSS:

.rfdSkinnedButton
{
display: block !important;
float: left !important;
}

However, have in mind that this may affect your layout because of the float, i.e - if you have a <div /> after the button it will stand next to it, not below it. To fix this, use <br style="clear: both;" /> or apply clear: both; to the <div /> itself.

Unfortunately, there are no browser hacks for FF and I cannot give you a solution that will execute only in FF < 3 versions. On the other hand we do not plan reverting to the -moz properties, as they are hard to maintain and cause other problems.

Regards,
Georgi Tunev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 21 May 2010, 01:09 PM

Hello,

The easiest way to do it is a global find & replace operation in your VS project (Ctrl+Shift+H). Find all "<asp:Button" and replace them with "<asp:Button UseSubmitBehavior=false".

If your project has a base page class, you can write a small recursive method that crawls the page controls and if it finds a Button control, sets the property. However, this must be done before the OnPreRender event of the button, because the button control uses the UseSubmitBehavior value after that.

All the best,
Lini
the Telerik team