RadRotator item div overflow not vertical scrollable

[Gibson Wong]

I'm trying to make my RadRotator item vertical scrollable in case the div overflow but it seem to render as hidden.
How should I style the div in my ItemTemplate?
See page snipplet below:

<telerik:RadRotator ID="radRotator1" runat="server" EnableViewState="true"
    Width="940px" Height="550px"
    ItemWidth="900px" 
    BorderStyle="None" BorderWidth="0" BorderColor="Transparent"  
    WrapFrames="true"
    ScrollDirection="Left, Right" RotatorType="SlideShowButtons"
    OnItemDataBound="radRotator1_ItemDataBound" >
    <ItemTemplate>
    <div style="overflow:scroll;">

       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
            ShowHeader="true" ShowFooter="false">             
        <Columns>
        ...
        </Columns>
        </asp:GridView> 
    <asp:Panel ID="pnlTest1" runat="server" Visible="false">
Panel content test.
    </asp:Panel>
    </div>
    </ItemTemplate>
</telerik:RadRotator>

[Gibson Wong]

telerik support or anyone got a solution for this?
Is this the limitation of the RadRotator?

Thanks.

[Kevin]

Hello Gibson,

You need to set the height of the div in order for the overflow property to work, because the div will just expand to fit its contents. Set the height to 100% and see if that works.

I hope that helps.

[Gibson Wong]

Kevin,
Thanks for your help.  I did put 100% height and overflow:scroll in my div inside ItemTemplate but it's still not working.
See attached image.

[Slav]

Hello Gibson,

If I understand your scenario correctly, you want to display a vertical scrollbar if any of the items of the RadRotator is too high to be displayed properly in the viewport. To achieve this, please set the following CSS rules to the parent div element in the ItemTemplate:
 - height:550px; - the height should match the height, specified in the ItemHeight and Height properties.
 - overflow-y:auto; - this will display a vertical scrollbar in case the content of the item has greater height that the item itself.

I noticed that you have not set the ItemHeight property in the presented code sample. Please, always configure the RadRotator, according to the suggestions in this help article, in order to ensure that the RadRotator functions correctly.

I have attached an example, demonstrating the provided solution. You can use it as a base for your further development.

Greetings,
Slav
the Telerik team

[Gibson Wong]

Hi Slav,
Thanks for your help.  It's working now.
The ticket is the "height:300px" fix height instead of 100% and overflow-y:auto.

Thanks again.