This is a migrated thread and some comments may be shown as answers.

RadRotator item div overflow not vertical scrollable

5 Answers 57 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Gibson Wong
Top achievements
Rank 1
Gibson Wong asked on 14 Sep 2011, 03:54 PM
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>

5 Answers, 1 is accepted

Sort by
0
Gibson Wong
Top achievements
Rank 1
answered on 15 Sep 2011, 03:50 PM
telerik support or anyone got a solution for this?
Is this the limitation of the RadRotator?

Thanks.
0
Kevin
Top achievements
Rank 2
answered on 16 Sep 2011, 01:36 PM
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.
0
Gibson Wong
Top achievements
Rank 1
answered on 16 Sep 2011, 03:23 PM
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.
0
Accepted
Slav
Telerik team
answered on 19 Sep 2011, 08:06 AM
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
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
0
Gibson Wong
Top achievements
Rank 1
answered on 19 Sep 2011, 03:32 PM
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.
Tags
Rotator
Asked by
Gibson Wong
Top achievements
Rank 1
Answers by
Gibson Wong
Top achievements
Rank 1
Kevin
Top achievements
Rank 2
Slav
Telerik team
Share this question
or