Page drawing

12 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 11 Nov 2010 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 11 Nov 2010 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 11 Nov 2010 Link to this post

    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
  5. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 12 Nov 2010 Link to this post

    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
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 12 Nov 2010 Link to this post

    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
    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
  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 12 Nov 2010 Link to this post

    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
  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 12 Nov 2010 Link to this post

    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
    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
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 12 Nov 2010 Link to this post

    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
    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
  10. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 12 Nov 2010 Link to this post

    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
  11. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 12 Nov 2010 Link to this post

    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">
    <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
    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
  12. Gary Meagher
    Gary Meagher avatar
    29 posts
    Member since:
    Jan 2010

    Posted 18 Nov 2010 Link to this post

    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 ?
  13. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 19 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017