RadRotator item div overflow not vertical scrollable

6 posts, 1 answers
  1. Gibson Wong
    Gibson Wong avatar
    8 posts
    Member since:
    Nov 2007

    Posted 14 Sep 2011 Link to this post

    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>
  2. Gibson Wong
    Gibson Wong avatar
    8 posts
    Member since:
    Nov 2007

    Posted 15 Sep 2011 Link to this post

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

    Thanks.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 16 Sep 2011 Link to this post

    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.
  5. Gibson Wong
    Gibson Wong avatar
    8 posts
    Member since:
    Nov 2007

    Posted 16 Sep 2011 Link to this post

    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.
  6. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 19 Sep 2011 Link to this post

    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
  7. Gibson Wong
    Gibson Wong avatar
    8 posts
    Member since:
    Nov 2007

    Posted 19 Sep 2011 Link to this post

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