Page drawing

[Jon]

Hi,

When using a standard button I am noticing that a lot of the time the right side of the button appears before the page finishes loading and well before the rest of the button finishes loading.  I'm noticing this on IE8 and haven't tested on any other browsers.  

Let me know if you want a screenshot...

Cheers,
Jon

[Bozhidar]

Hello Jon,

Could you please tell us on which demo page you are experiencing such a problem? I have tested the Embedded Icons demo and it looks fine in IE8, IE7, Firefox, Safari and Chrome.

The behavior described by you, could be caused if you have RadFormDecorator at the same page, which hides all inputs, decorates them and then show it again. You are seeing the right side of the button because it is the anchor tag that wraps the input. The decision to wrap the input in an anchor tag is to provide the rounded corners feature. To the anchor tag is applied the right background corner, while to the input is applied the other part of the image - left corner and middle part.

Best wishes,
Bojo
the Telerik team

[Jon]

Hi Bojo,

Good point I didn't look for the issue on any of the demo pages.

Thinking about it you are right about the form decorator.  I have it decorating speific control types and at the moment haven't disabled the button type.  I'll do that tomorrow and hopefully it will fix the issue.  Just a bummer about the 100+ pages I need to search through for buttons and form decorator tags to change :(

Regards,

Jon

[Jon]

Hi Bojo,

I'm trying to alter the form decorator to get around this but nothing helps.  I have set the DecoratedControls to Scrollbars only.  Problem still appears.  I have then added this ControlsToSkip="Buttons" and the problem is still present.  So I see that I have three options:

Don't use the formdecorator - then scroll bars are not styled
Don't use the new buttons - then no icons
Ignore the issue - ugly screen drawing

Is there a work around for this - I'd have though that this would have been addressed in the beta release as I'm sure that it's common practice to use the form decorator on forms...

I think that this issue should be classified as a bug and set for a fix in the SP1 release.

Regards,

Jon

[Bozhidar]

Hello Jon,

There are reason the elements decorated by RadFormDecorated to have visibility: hidden set. The control hides the real form elements and replace them with additional HTML elements that behave like the real input elements, but decorated already.

The workaround for your case is to use cascade all form elements though RadButton CSS class and set them visibility: visible. This will allow you use both controls on the same page without the annoying postponed appearance of the buttons left part. This is the additional CSS, that you could use in the head section of your document:

<style type="text/css">
    .RadButton button,
    .RadButton input[type='submit'],
    .RadButton input[type='reset'],
    .RadButton input[type='button'],
    .RadButton input[type='checkbox'],
    .RadButton input[type='radio'],
    .RadButton select,
 .RadButton input,
    .RadButton textarea,
    .RadButton button,
    .RadButton select
    {
         visibility: visible !important;
        }
</style>

I have tested it, and it works fine with IE8.

Best wishes,
Bojo
the Telerik team

[Jon]

Thanks for the work around Bojo.

Would there be any negative impact if I place this in the site wide CSS?  I assume that as it is RadButton the effects are limited only to RadButton and not decorated buttons.

Will this be fixed in the SP1 release?

Regards,

Jon

[Bozhidar]

Hi Jon,

The workaround affects RadButton only as it is cascaded through RadButton class. You could still use RadFromDecorator without any problems.

For now we will give it as a workaround only. RadButton is a brand new control and if we decide later to extend its behavior and will need to set the visibility to hidden, it will be a breaking change to play with it.

And as we have a very simple and working fix for that, we prefer for the time being to give as a workaround instead to put it in the RadButton code.

Also we are trying to avoid fixes in the base CSS that contain !important rule.

Best wishes,
Bojo
the Telerik team

[Bozhidar]

Hi Jon,

I forgot to mark, that you could put the CSS fix in any CSS file you want to, just be sure it will be loaded on the page so the fix will take effect to overrdie RadFormDecorator styles.

Best wishes,
Bojo
the Telerik team

[Jon]

Hi Bojo,

Good - well it seems to work.  Know what you mean re the use of !important.

The only thing that seems to fall through the net is that when using the button on a coloured background using the css mod the text of the button is visible before the rest of the button - on my one (black) the button is on a dark background so you see the white button text for a second before the button fills it in.  Any idea how to get around that issue?

Regards,

Jon

[Bozhidar]

Hello Jon,

I am afraid I could not reproduce the problem with the following code:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="customresources/customButtonIcons.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .RadButton button,
    .RadButton input[type='submit'],
    .RadButton input[type='reset'],
    .RadButton input[type='button'],
    .RadButton input[type='checkbox'],
    .RadButton input[type='radio'],
    .RadButton select
    { visibility: visible !important; }
    .RadButton input,
    .RadButton textarea,
    .RadButton button,
    .RadButton select { visibility: visible !important; }
    </style>
</head>
<body style="background-color: #000;">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />
    <strong>Custom Icons</strong>
    <br />
    <br />
    <strong>Button with two Custom Icons</strong>
    <br />
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" Text="Enable Html and Flash" Skin="Black">
        <Icon PrimaryIconCssClass="rbAdd" PrimaryIconLeft="4" PrimaryIconTop="4" SecondaryIconCssClass="rbOk" SecondaryIconRight="4" SecondaryIconTop="4" />
    </telerik:RadButton>

    </form>
</body>
</html>

Could you send me sample code where the problem exists, or make some modifications to reproduce it in mine?

I have test it with IE7/8, Firefox. Safari/Chrome also - where the problem really could be seen. Safari does not fire onload at the same time as other browsers. With most browsers, they will wait until the page is loaded, all images and stylesheets and scripts have run, and the page has been displayed before they fire onload. Safari/Chrome does not and it could be considered as browser behavior.

Regards,
Bojo
the Telerik team

[Gary Meagher]

I have exactly the same problem.
Form Decorator is causing RadButton to load slowly. If I'm removing RadFormDecorator the RadButton loads okay
but all my other controls are without skin.
Is there a way to apply the skin for asp controls without the RadFormDecorator ?

[Bozhidar]

Hi Gary,

Have you tried the following fix in order to avoid slow loading of RadButton when it is used together with RadFromDecorator:

<style type="text/css">
    .RadButton button,
    .RadButton input[type='submit'],
    .RadButton input[type='reset'],
    .RadButton input[type='button'],
    .RadButton input[type='checkbox'],
    .RadButton input[type='radio'],
    .RadButton select,
    .RadButton input,
    .RadButton textarea,
    .RadButton button,
    .RadButton select
    {
         visibility: visible !important;
        }
</style>

Even if you do not have RadFormDecorator on the page, you could apply the necessary skin to the control by using the Skin property, e.g:

<telerik:RadEditor ID="editor1" runat="server" Skin="WebBlue" />

Greetings,
Bojo
the Telerik team