Scrolling in radlistview (not able to set height)

3 posts, 0 answers
  1. foram
    foram avatar
    3 posts
    Member since:
    Aug 2011

    Posted 13 Aug 2013 Link to this post

    hello all,

    I want scrolling for radlistview and I am not able to do that below is my code,

    <telerik:RadListView     ID="plantlistview" runat="server" ItemPlaceholderID="TrackContainer"
                                        DataSourceID="imagedatasourcec"  Skin="Outlook"  Height="300px" AllowCustomPaging="True" >                                 
                                        <LayoutTemplate >                                    
                                            <div class="RadListView RadListView_<%# Container.Skin %>"  >
                                                <asp:PlaceHolder  ID="TrackContainer" runat="server" ></asp:PlaceHolder>
                                            </div>                                        
                                        </LayoutTemplate>                                    
                                        <ItemTemplate >
                                            <div class="track rlvI" >
                                                <div style="position: absolute; z-index: 8;">
                                                    <asp:Image ID="Image2" runat="server" Height="200px" Width="200px" ImageUrl="~/style/Images/webimages/photoframe.png" />
                                                </div>
                                                <div style="position: absolute; z-index: 9; padding-top: 20px; padding-left: 20px;">
                                                    <asp:Image ID="Image44" runat="server" Height="160" Width="160" ImageUrl='<%# String.Format("~/Images/{0}", Eval("img_name"))%>' />
                                                </div>
                                                <div id="Div1" style="position: absolute; z-index: 10;" onclick="window.open('donate.htm', '_self');">
                                                    <telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" Height="150" Width="150"
                                                        CssClass="img123" runat="server" ToolTip="Drag and drop it on the list to add in liiii">
                                                    </telerik:RadListViewItemDragHandle>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                        <ClientSettings AllowItemsDragDrop="True"  >
                                        </ClientSettings>
                                        
                                    </telerik:RadListView>
                                 
    ------------------------------------------------------------------------------------------
    CSS

    *
    {
        padding:0;
        margin:0; 
        font-family:  Helvetica,Arial, sans-serif;
        font-size: 12px;
    }

    #trackContainer
    {
        border:none;    
        width:800px;
        float:left;    

    div.RadListView
    {

        border:none;
        background-color:Transparent;    
    }
    .track,
    div.RadListView div.track
    {
        width:210px;
        height:225px;    
        float:left;   
        padding:0;
        margin:0;
        border:0;


    div.RadListView div.track h3,
    div.RadListView div.track div
    {
        text-align:center;   
        
        

    div.RadListView div.track h3
    {
        font-size:12px;

    div.RadListView div.track .info
    {
        padding-top:60px;
        
    }


    div.RadListView div.rlvDraggedItem
    {
        border:0;
        margin:0;

    div.rlvDraggedItem div.track.rlvI
    {
        border:none;   
        width:200px;
        


    div.rlvDraggedItem div.track.rlvI .info
    {
        padding-top:10px;
        padding-left:10px;

    div.rlvDraggedItem div.track.rlvI .info div,
    div.rlvDraggedItem div.track.rlvI .info h3
    {
        font-size:11px;
        line-height:normal;
    }
     
    div.rlvDraggedItem div.track.rlvI .rlvDrag
    {
        display:none;
    }
     
    div.rlvDraggedItem div.track.rlvI .info .album
    {
        display:none;

    div.rlvDraggedItem div.track.rlvI .info h3,
    div.rlvDraggedItem div.track.rlvI .info div
    {
        margin-left:40px;
        width:130px;
        height:16px;
        display:block;
        text-align:left;
        overflow:hidden;
    }

    Please help me,

        
  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 16 Aug 2013 Link to this post

    Hello Foram,

    You can achieve this with the following CSS rule
    .RadListView
    {
        overflow: auto;
        height: 200px;
        width: 450px;
    }

    I hope this helps.

    Regards,
    Galin
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. foram
    foram avatar
    3 posts
    Member since:
    Aug 2011

    Posted 16 Aug 2013 Link to this post

    Thanks Galin,

    It worked also I have to remove style="position:absolute"

    Thanks 
    Foram

Back to Top