Rotator not displaying in Android

6 posts, 0 answers
  1. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 27 May 2013 Link to this post

    When is this bug been fixed?
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 29 May 2013 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 11 Jun 2013 Link to this post

    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>
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 14 Jun 2013 Link to this post

    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
    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 the blog feed now.
  6. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 15 Jun 2013 Link to this post

    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>


  7. Ivaylo
    Admin
    Ivaylo avatar
    37 posts

    Posted 19 Jun 2013 Link to this post

    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
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017