Check and Button messedup

[Moon]

I downloaded the trial of Q2 ajax and used the RadFormdecorator on my checkbox and button. the checkbox bottom was cut off in Firefox.

So I downloaded the Q3 beta version, installed it into the toolbox and web.config, replaced all the /Scripts and /Skins folders, and now in Firefox the checkbox is still cut off on the bottom, but als the button is expanded to the entire width of my screen on two lines. I don't give a button width or style, I just let it default.

What do I need?
    <tr>
        <td colspan="2" class="TableField">
            <asp:CheckBox ID="chkAgree" runat="server" />
            <br /><br />
        </td>
    </tr>
    <tr>
        <td colspan="2" class="TableLabel">
            <asp:Button ID="btnRegister" runat="server" />
        </td>
    </tr>

In codebehind:
        chkAgree.Text = "I agree to the Terms and Conditions"
        btnRegister.Text = "Register"

I was wanting to register this by nov. 4th, but so far I'm just having troubles. :(

[Georgi Tunev]

Hello Moon,

I tried to reproduce the problem, but everything is working fine at my side (screenshot attached). Could you please open a support ticket and send us a small sample project where this issue can be seen? We will check it right away.


Kind regards,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Moon]

Your project still fails in my Firefox. I am using Firefox 2.x. I will download the latest 3.x and let you know what happens with that.

[Moon]

That was it.

I downloaded the latest 3.x version of firefox and it works.

Be aware that it is not backward compatible with Firefox 2.x

The button expands to the entire width of the form and the checkbox bottom is cut off in Firefox 2.x.

thanks.

Moon

[Tom]

I just started converting my code from Q1 2008 to Q3 2008.  The first thing I notice is the buttons are running full screen when using the decorator.  This is in Firefox only.  It works fine in IE.  Note that it worked in Q1 and Q2 with Firefox.  I am using Firefox 2.0 and IE 7.  I did notice that there is a script error with IE but the buttons still render correctly.  In Firefox they do not render correctly.  Also note that I get the same issue when viewing the Telerik demos for the form decorator.  Views ok in IE but not in Firefox.

Here is my code.

    <telerik:RadFormDecorator ID="rfdExportZone" runat="Server" DecorationZoneID="ExportZone"
        Skin="Vista" />

<table>
        <tr>
            <td colspan="5">
                <span id="ExportZone">
                    <asp:Button ID="btnExportExcel" Text="Export to Excel"
                        OnClick="btnExportExcel_Click" runat="server" Width="100px"></asp:Button>
                    <asp:Button ID="btnExportWord" Text="Export to Word"
                        OnClick="btnExportWord_Click" runat="server" Width="100px"></asp:Button>
                </span>
            </td>
        </tr>
    </table>

[Moon]

Tom,

This is a known issue in FF 2.x. You need to upgrade to FF 3.x

[Moon]

Tom,

 

Here is a support ticket comment I received from Telerik:

 

We are aware of the two issues that you report. Those are only visible in FF2, and not in FF3 - and the reason is limitations of the FF2 support for CSS - some of the advanced CSS options needed for the RadFormDecorator to style buttons properly simply were not available in FF2.

While the earlier way of styling buttons that existed in RadFormDecorator looked OK in FF2, it also had a number of limitations in common scenarios - most notably when the button was in a scrollable parent, or when some advanced CSS such as float:right or position:relative.

The new rendering eliminates all such issues, as well as is much more straightforward. Since FF2 was largely replaced by FF3 already, we took the decision that it is the correct way to go. Our own observations show that "regular" users use already FF3.

[Tom]

Unfortunately I am required to support both FF 2 and FF 3 as well as IE 6 and IE 7.  Well I solved my problem by taking out the decorator and just using Image buttons.  Not what I wanted to do as I really like the appearance of the decorator.  Now, if I understand you this only happened with the Q3 version, correct?  Because it was working good with sites running under Q1 and Q2.

Tom

[Moon]

You'll need to ask Telerik that, as I don't know. I started with Q3.

Maybe open a new forum post or wait and see if they read this one.

 

[Martin]

Hi Moon,

With the release of Q3.2008 we made certain changes in the rendering and respectively with the styles of RadFormDecorator's skinned buttons, and we decided to drop the support for ForeFox 2 for the sake of improving the performance with Chrome and Safari. In the previous versions of RadFormDecorator the skinned buttons were actually block elements, which were floated to the left, which had nothing in common with the real buttons, which are inline elements and this caused many problems. Later on, we used the inline-block property for Internet Explorer and Opera, and a combination of several -moz properties to achieve inline behavior for FF. In version 3.0, FireFox finally implemented inline-block, and we decided to stick to it rather than to use the -moz properties, because they caused a couple of other issues that were very hard to handle.

As FireFox is a standards compliant browser (well, mostly) it is not possible to query separately 2x and 3x versions, simply because FF hacks do not exist. This is why we cannot offer you a 2x-specific solution, and on the other hand FF versions are being released every 3-4 weeks, and these minor versions ofter offer different support for similar properties, especially the -moz- prefixed ones.

All the best,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Tom]

Ok, now that we have established that Firefox 2 and the Form Decorator are not compatible in Q3 2008 because of advanced CSS issues so now I have to ask this question. Are there any other controls that will have an issue with Firefox 2 in the Q3 suite of controls.  I just yesterday started converting one of 3 sites over to Q3.  Luckily I use the Form Decorator on almost every page so I caught it early before having converted the entire site.  But now I am wondering if there will be any more surprises.  As I said, I have to support both Firefox 2 and 3.  I did get the IE 6 support requirement lifted yesterday so will only have to support IE 7.  Unfortunately Firefox 3 hasn't been out long enough that my management will drop support requirements for Firefox 2.

Tom

[Martin]

Hello Tom,

As a community project, the implementation of css / xhtml and javascript support is not always well-documented and coherent.

In my experience as a front-end developer I have seen cases when a certain feature has been implemented, then dropped again in the next version, then fixed again i the later versions. Unfortunately, such issues are very hard to handle as there are no version-based css hacks for FireFox.

I cannot tell for sure if other issues will occuer with different browser versions, but I believe that we have managed to fix most of them.

However, I will try a few things and if I find a solution, I will send you asap.

Best wishes,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Martin]

Hi Tom,

The solution for FireFox 2x is to add float: left to the skinned buttons, i.e:

.radfdSkinnedFormButton
{
   float: left;
}

Unfortunately, this approach will have implications on other browsers and versions, so you have to add this property with a script which detects FireFox 2.

You also have to loop through the .radfdSkinnedFormButton classes the $telerik.getChildrenByClassName(element, className) method of Telerik.Web.UI.

Greetings,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.