Remove From My Forums

DataList scroll bars

Question

User1510859543 posted

I want to be able to have vertical scroll bars around my DataList filled with images so I can scroll up and down when more than fit on the page. I have my DataList inside a Panel control with Scrollbars="Vertical" on it but scrollbars do not show up. Below is the Panel and DataList markup. What do I need to do?

    <asp:Panel ID="PanelImages" runat="server"
        BackColor="#CCCCCC" CssClass="Hide" ClientIDMode="Static" Height="600" ScrollBars="Vertical">
        <div style="font-size: larger; color: #0000FF; text-align: center; font-weight: bolder;">
            Click on image to toggle selection (green = selected)
        </div>
        <asp:DataList ID="PicturesInFolder" runat="server" CellPadding="3" 
            RepeatDirection="Horizontal" 
            RepeatLayout="Flow" RepeatColumns="5" 
            Caption="Images in selected folder">
            <ItemTemplate>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <cc1:GeneratedImage ID="ResizedImageGenerator" runat="server"
                            ImageHandlerUrl="~/ImageHandlers/ResizeImageHandler.ashx" 
                            AlternateText='<%# System.IO.Path.GetFileName(Container.DataItem) %>' 
                            ToolTip='<%# System.IO.Path.GetFileName(Container.DataItem) %>'>
                            <Parameters>
                                <cc1:ImageParameter Name="ImageUrl" Value='<%# Container.DataItem %>' />
                                <cc1:ImageParameter Name="Width" Value="180" />
                            </Parameters>
                        </cc1:GeneratedImage>
                        <asp:Label ID="LblImageUrl" runat="server" Text='<%# Container.DataItem %>' CssClass="Hide"></asp:Label>
                        <asp:Label ID="LblFileName" runat="server" Text='<%# System.IO.Path.GetFileName(Container.DataItem) %>' CssClass="Hide"></asp:Label>
                    </div>
                </div>
                <div class="row mleft0" style="width: 100%">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <asp:CheckBox ID="ckPickPhoto" runat="server" Text="Upload" CssClass="dummy hide" />
                        <asp:CheckBox ID="ckJobID" runat="server" Text="Job ID" />
                    </div>
                </div>
            </ItemTemplate>
            <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1pt" />
        </asp:DataList>
    </asp:Panel>

Tuesday, June 25, 2019 8:29 PM

Answers

User-719153870 posted

Hi dlchase,

I used your code to create a demo based on my own database, and the vertical scrollbar worked fine.

Generally speaking, we may think that the problem appears in the style of your panel. If possible, please provide detailed code about 'CssClass="Hide"' to help reproduce your problem.

Another possible reason why you can't see the scroll bar may be that you set the scroll bar in the panel control, and the data list’s data in the panel is not enough to reach the height of 600 you set.

I suggest that you can put a div outside the data list and set a fixed height and vertical scroll bar for it, so that you can achieve the desired results.

Please refer to below codes:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="PanelImages" runat="server"
                BackColor="#CCCCCC" CssClass="Hide" ClientIDMode="Static" Height="150" ScrollBars="Vertical"><%--Here i set the Height to 150 so that you can see the scroll bar--%>
                <div style="font-size: larger; color: #0000FF; text-align: center; font-weight: bolder;">
                    Click on image to toggle selection (green = selected)
                </div>
                <div style="height:200px;overflow:auto;float:left"><%--Add a div outside your Datalist to show the scroll bar for Datalist--%>
                    <asp:DataList ID="PicturesInFolder" runat="server" CellPadding="3"
                        RepeatDirection="Horizontal"
                        RepeatLayout="Flow" RepeatColumns="5"
                        Caption="Images in selected folder">
                        <ItemTemplate>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <asp:Label ID="LblImageUrl" runat="server" Text='<%# Eval("LLevel") %>' CssClass="Hide"></asp:Label>
                                    <asp:Label ID="LblFileName" runat="server" Text='<%#  Eval("DName") %>' CssClass="Hide"></asp:Label>
                                </div>
                            </div>
                            <div class="row mleft0" style="width: 100%">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <asp:CheckBox ID="ckPickPhoto" runat="server" Text="Upload" CssClass="dummy hide" />
                                    <asp:CheckBox ID="ckJobID" runat="server" Text="Job ID" />
                                </div>
                            </div>
                        </ItemTemplate>
                        <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1pt" />
                    </asp:DataList>
                </div>
            </asp:Panel>
        </div>
    </form>
</body>
</html>

Here's result of my demo:

Best Regard,

Yang Shen

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, June 26, 2019 5:45 AM

Answered by:

DataList scroll bars

Question

Answers