简体   繁体   中英

How I get a Scrollbar for My ListView control in ASP.NET

I have built a ASP.NET Application and use two divs and a ListView. My ListView get Data from a Database and if I have to much Rows a I get a overflow but I want then a Scrollbar for this ListView.

My Site:

在此处输入图片说明

My Site if I have to much rows :(

在此处输入图片说明

My Site with a Scrollbar that I want!

在此处输入图片说明

My Code:

<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
    <div class="userlist">
        <div class="liste">

            <asp:ListView runat="server" ID="myListView">

                <LayoutTemplate>
                    <table id="UserList" border="0" cellpadding="0" cellspacing="0">
                        <tr style="background-color:#ccdaeb">
                            <th align="left">
                                <asp:Label ID="header_name" runat="server" Text="Name"></asp:Label></th>
                            <th align="left">
                                <asp:Label ID="header_firma" runat="server" Text="Firma"></asp:Label></th>
                            <th align="left">
                                <asp:Label ID="header_von" runat="server" Text="gültig ab"></asp:Label></th>
                            <th align="left">
                                <asp:Label ID="header_bis" runat="server" Text="gültig bis"></asp:Label></th>
                            <th align="left">
                                <asp:Label ID="header_ersteller" runat="server" Text="erstellt von"></asp:Label></th>
                        </tr>
                        <tr id="itemPlaceholder" runat="server"></tr>
                    </table>
                </LayoutTemplate>

                <ItemTemplate>
                    <tr>
                        <td align="left"><asp:Label ID="lblname" Text='<%# Eval("GanzerName") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblfirma" Text='<%# Eval("Firma") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblvon" Text='<%# Eval("GültigVon") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblbis" Text='<%# Eval("GültigBis") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblersteler" Text='<%# Eval("Ersteller") %>' runat="server"  /></td>
                    </tr>
                </ItemTemplate>

                <EmptyDataTemplate>
                    <h4>Es wurden keine Einträge gefunden</h4><br/>
                    <asp:Button runat="server" ID="btnAnlegen" Text="Benutzer Anlegen"/>
                </EmptyDataTemplate>

                <AlternatingItemTemplate>
                    <tr>
                        <td align="left"><asp:Label ID="lblname" Text='<%# Eval("GanzerName") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblfirma" Text='<%# Eval("Firma") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblvon" Text='<%# Eval("GültigVon") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblbis" Text='<%# Eval("GültigBis") %>' runat="server"  /></td>
                        <td align="left"><asp:Label ID="lblersteler" Text='<%# Eval("Ersteller") %>' runat="server"  /></td>
                    </tr>
                </AlternatingItemTemplate>

            </asp:ListView>

        </div>
    </div>
</asp:Content>

You can fix the hsight if liste div and set overflow to visible or what ever suits you. Height must be less then the height taken by data in side div to see the scroll bar.

Change

 <div class="liste">

to

<div class="liste" style="height:300px; overflow:scroll">

or

<div class="liste" style="height:300px; overflow:visible">

尝试将溢出设置为滚动:

<div class="liste" style="height:200px; overflow:scroll;">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM