Rotator not displaying in Android

[Kjell]

When is this bug been fixed?

[Slav]

Hi Kjell,

This bug with the rotator can be fixed only if its rendering is changed radically. The issue is due to the .rrRelativeWrapper element having overflow: visible and the Android browser treating this as a scrollable area.

You can workaround it by forcing the overflow to hidden and creating custom rotator buttons via the inner property ControlButtons of the control. An example of this approach is available in the Knowledge Base article Using RadRotator under Android browser.

Regards,
Slav
Telerik

[Kjell]

Thanks mutch better, but:
How put the ControlButton images inside the banner, now the outside?

<style type="text/css">
    .RadRotator .rrRelativeWrapper {
        overflow: hidden;
    }

    #btnLeft, #RadRotator1, #btnRight {
        float: left;
    }

    #btnLeft, #btnRight {
        margin-top: 0px;
    }

</style>

<table style="width:960px; margin:0px auto; border-collapse:collapse; border-spacing:0px;">
          <tr>
              <td style="padding:0px; height:350px;"><img id="btnLeft" alt="Previous Slide" src="picture/Rotator/previousSlide.gif" /></td>
              <td style="width:960px; padding:0px; height:350px;">
                <telerik:RadRotator ID="RadRotator1" DataSourceID="xmlDataSource1" Skin="Metro" Width="960px" ItemWidth="960px" Height="350px" ItemHeight="350px" RotatorType="Buttons" EnableDragScrolling="True" ScrollDuration="700" runat="server">
                  <ItemTemplate>
                    <div class="itemTemplate">
                      <asp:HyperLink ID="imgBanner" ImageUrl='<%# "~/banner/images/" + XPath("Image") %>' NavigateUrl='<%# XPath("Url") %>' target='<%# XPath("Target") %>' ToolTip='<%# XPath("Alt") %>' BorderStyle="none" runat="server" />
                    </div>
                  </ItemTemplate>
                  <ControlButtons LeftButtonID="btnLeft" RightButtonID="btnRight" />
                </telerik:RadRotator>
              </td>
              <td style="padding:0px; height:350px;"><img id="btnRight" alt="Next Slide" src="picture/Rotator/nextSlide.gif" /></td>
          </tr>
        </table>

[Slav]

Hi Kjell,

There are two options for positioning buttons within the RadRotator.
The first way is to have the buttons within the corresponding rotator item. They will be positioned relative or absolute, thus appear to be situated on top of the item's content.
The second way is to have the buttons inside a common container as the RadRotator, i.e. inside a <div> element you can declare both the rotator and the buttons. Then set the position of the container element to relative and the position of the buttons to absolute so that the buttons themselves can have their left and top positions relative to their container.

Hope this helps. Please, let me know if you run into troubles implementing any of the solutions.

Regards,
Slav
Telerik

[Kjell]

Is not good at this with css position.
Have gotten this far (Test), has just left to solve how to get the buttons remain in the same position when I change / drag screen resolution.
Top works, but not left and right
Tips received warmly ....

<style type="text/css">
    .RadRotator .rrRelativeWrapper {
        overflow: hidden;
        position: relative;
        z-index: 0;
    }

    #btnLeft {
        position: absolute;
        top: 260px;
        left: 153px;
        z-index: 1;
    }

    #btnRight {
        position: absolute;
        top: 260px;
        right: 153px;
        z-index: 2;
    }
</style>

<div id="container" style="width:960px; height:350px; margin:0px auto;">
<img id="btnLeft" alt="Previous Slide" src="picture/Rotator/previousSlide.gif" />
  <telerik:RadRotator ID="RadRotator1" DataSourceID="xmlDataSource1" Skin="Metro" Width="960px" ItemWidth="960px" Height="350px" ItemHeight="350px" RotatorType="Buttons" EnableDragScrolling="True" ScrollDuration="700" runat="server">
    <ItemTemplate>
      <div class="itemTemplate">
          <a href="<%# XPath("href") %>" target="<%# XPath("target") %>"><img src="banner/images/<%# XPath("filename") %>" alt="<%# XPath("description") %>" style="border: 0px;" /></a>
      </div>
    </ItemTemplate>
    <ControlButtons LeftButtonID="btnLeft" RightButtonID="btnRight" />
  </telerik:RadRotator>
  <img id="btnRight" alt="Next Slide" src="picture/Rotator/nextSlide.gif" />
</div>

[Ivaylo]

Hello Kjell,

Thank you for the feedback.

In order to achieve the desired behavior, I would introduce a slight modification to some of your CSS styles:

#btnLeft {
    left: 10px;
    position: absolute;
    top: 165px;
    z-index: 1;
}

#btnRight {
    position: absolute;
    right: 10px;
    top: 165px;
    z-index: 2;
}

#container {
    height: 350px;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

By adding position:relative to the container element, as previously suggested by my colleague, you force the button's positions to be relative to that element. In this way changes in the browser's view port and resizing of the window will not affect the position of the arrows (as desired).

I have also updated the #btnRight and #btnLeft styles, so that the buttons remain centered vertically.

For your convenience I have attached a screenshots displaying the resulting behavior on my side.

I hope that you will find the provided solution satisfactory. Feel free to contact us if you have any other questions.

Regards,
Ivaylo
Telerik