Display radrotator in Google chrome

9 posts, 0 answers
  1. Andre
    Andre avatar
    11 posts
    Member since:
    Oct 2010

    Posted 29 Apr 2011 Link to this post

    Hello,

    I've noticed an issue with the 2011Q1 at 2011Q1 SP1 versions that I don't understand. The same website with 2010 versions works correctly.

    I have a rotator in an asppanel. The panel is hidden when the page is loaded, then I bind a datasource to the rotator and I display it. The right and left buttons are visible, but not the items in the carousel. I use ClientItemShown event to get some informations from the items and put its in labels, and it works (I can click on left or right button, I get the shown item inforations), but items are not visible anymore. When I do a postback (click an a button for example), the items appears. Then the rotator works, until I hide/display the panel.
     
    Is there somebody who already has gotten this problem?

    Thank you very much!

    André
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 02 May 2011 Link to this post

    Hello Andre,

    First and foremost, I should assume that you are showing the RadRotator through an Ajax Request (UpdatePanel, RadAjaxPanel, RadAjaxManager, etc.). If that is the case, then here is what is going wrong.

    The behavior is due to the skin style sheet resources loading asynchronously through the Ajax request. In order to make sure the resources are present, you can load them with the main content. There are two basic approaches for this.
    Let's assume, first, that the skin will be the Default one.
    1. Load the styles through a link tag using the Page.ClientScript.GetWebResourceUrl method.
      <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Rotator.css") %>' rel="stylesheet" type="text/css" />
      <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Default.Rotator.Default.css") %>' rel="stylesheet" type="text/css" />
      Notice the name of the skin in the second link tag. If you wish to use another skin, just replace the name with that of the new one.
    2. Use the RadStyleSheetManager.
      <telerik:RadStyleSheetManager ID="StyleSheetManager1" runat="server">
              <StyleSheets>
                  <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Rotator.css" />
                  <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Rotator.Default.css" />
              </StyleSheets>
          </telerik:RadStyleSheetManager>
      RadStyleSheetManager requires a HttpHandler registration in web.config. Please, use the control Smart Tag(from Design View) to add the handler automatically, or see the help for more information: Controls > RadStyleSheetManager.
    Either approach is equally valid and the choice depends entirely on your own preference.

    Kind regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aleks
    Aleks avatar
    3 posts
    Member since:
    Feb 2011

    Posted 03 May 2011 Link to this post

    what about the buttons, they are not centered, check the picture
  5. Andre
    Andre avatar
    11 posts
    Member since:
    Oct 2010

    Posted 04 May 2011 Link to this post

    Hello Niko,

    thank you for your help.

    The rotator works fine now, and I don't understand why, I haven't tried yet what you explained to me... If the problem comes back, I'll do it!

    Thank you again!

    Best regards,
    André
  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 04 May 2011 Link to this post

    Hi Aleks,

    Please, check that there are no additional CSS rules that may affect the visualization of the Rotator. Otherwise I should advice you to open a support ticket and attach a fully runnable sample project that reproduces the issue and we will investigate it.

    All the best,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  7. Aleks
    Aleks avatar
    3 posts
    Member since:
    Feb 2011

    Posted 04 May 2011 Link to this post

    check the telerik rotaror examples in chrome and you will see what is the problem, check the picture i posted before
  8. Niko
    Admin
    Niko avatar
    387 posts

    Posted 09 May 2011 Link to this post

    Hi Aleks,

    Yes, the button indeed looks displaced in the examples, but still running various tests in different environments tends to produce controversial results. This issue is related to an incorrect behavior of the Chrome's rendering engine. Still we will look into the example a try to come up with a workaround there.

    Thank you for noting this issue.

    Greetings,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  9. Androide
    Androide avatar
    3 posts
    Member since:
    Jan 2011

    Posted 18 Jun 2012 Link to this post

    Is there a workaround since  the last post?
  10. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 Jun 2012 Link to this post

    Hi Martin,

    You can workaround this behavior by modifying the CSS styles of the RadRotator's control button via client-side script. The following code sample shows how to do this on the OnClientLoad client-side event of the rotator control:
    <script type="text/javascript">
        function OnClientLoad(sender, args) {
            if ($telerik.isChrome) {
                $telerik.$(sender.get_element()).find(".rrButtonRight").css({ right: "-4px" });
            }
        }
    </script>
    <telerik:RadRotator ID="RadRotator1" runat="server" Width="324px" Height="113px"
        CssClass="rotatorStyle" ItemHeight="113" ItemWidth="150" ScrollDuration="500"
        RotatorType="CoverFlowButtons" OnClientLoad="OnClientLoad">
        ...
    </telerik:RadRotator>

    All the best,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017