Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Won't Fix
Last Updated: 14 Jun 2018 09:38 by ADMIN
ADMIN
Vessy
Created on: 12 Jun 2018 12:07
Category: Rotator
Type: Bug Report
1
RadRotator stops working after Ctrl+F5 refresh if the ItemWidth is not set
RadRotator stops working after Ctrl+F5 refresh if the ItemWidth is not set in Firefox. After the refresh RadRotator looses its item width calculation and show only the first item, the others and rendered on the next row.

Video: https://www.screencast.com/t/hqYDQrPsemK

1. Run the code below in Firefox
2. Press Ctrl + F5

Result: The rotator does not rotate the items anymore

                    <telerik:RadRotator ID="RadRotatorLogosTelerik" RotatorType="AutomaticAdvance" Skin="Metro" RenderMode="Lightweight" Visible="true" runat="server" EnableRandomOrder="false"
                        Height="180px" Width="980px"
                        ItemHeight="80px">
                        <Items>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <div id="imgitemTemplate">
                                        <asp:Image ID="Image1" runat="server" AlternateText="becken" ImageUrl="https://placeimg.com/980/80/tech" />
                                    </div>
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <div id="imgitemTemplate">
                                        <asp:Image ID="Image2" runat="server" AlternateText="goodis" ImageUrl="https://placeimg.com/980/80/animals" />
                                    </div>
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <div id="imgitemTemplate">
                                        <asp:Image ID="Image3" runat="server" AlternateText="kubo" ImageUrl="https://placeimg.com/980/80/arch" />
                                    </div>
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                        </Items>
                    </telerik:RadRotator>
1 comment
ADMIN
Marin Bratanov
Posted on: 14 Jun 2018 09:37 
This is the expected behavior of the control. It requires the four dimensions (Width, Height, ItemWidth, ItemHeight) to be set by the developer in order to function properly: https://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/getting-started/overview#radrotator-dimensions-configuration

The rotator is designed to loop through identical items that are in a list and that uses JavaScript animations through altering their CSS properties (i.e., it is not a CSS3 animation, because a decade ago when the control was being created CSS3 did not yet exist). Thus, the calculations the control performs rely heavily on the item size (ItemHeight and ItemWidth) and how they fit the viewport size (Width and Height). If some of these properties are not set, internal variables may be undefined or have wrong values, and that can break all calculations and animations.

That said, this will not be treated as a bug and you would need to configure any rotators you have accordingly. You may also find useful the following articles:
- on configuring the rotator size properly: https://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/getting-started/how-to-configure-size-of-rotator-with-buttons
- how you can use fluid design with the rotator (width=100%) and its limitations: https://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/mobile-support/fluid-capabilities
Create an account Log In
View
Type
Status
Category