如何使转发器元素可滚动?

时间:2016-12-27 16:23:29

标签: asp.net

我有这个转发器的asp元素:

    <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False" >
        <ItemTemplate>
            <div class="row1">
                <table style="width: 100%">
                    <tr>
                        <td rowspan="4" onclick="parent.parent.ZoomToView(<%# Eval("Lon") %>, <%# Eval("Lat") %>, 2500)" style="cursor: pointer;">
                            <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
                                Height="32" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td rowspan="10">
                            <asp:Image class="toggleRow" ImageUrl="~/Images/vertical-dots.png" runat="server" Width="32"
                                Height="32" Style="height: 30px; position: relative; float: left; cursor: pointer;" /></td>
                        </td>
                    </tr>
                    <tr class="pointDescArea">
                        <td>text:</td>
                        <td rowspan="2">
                            <h1 style="color: gray"><%# Eval("Text") %></h1>
                        </td>
                    </tr>
                    <tr class="hidden">
                        <td>X:</td>
                        <td><%# Eval("Lon") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>Y:</td>
                        <td><%# Eval("Lat") %></td>
                    </tr>
                    <tr>
                </table>
            </div>
        </ItemTemplate>

        <AlternatingItemTemplate>
            <div class="row2">
                <table style="width: 100%">
                    <tr>
                        <td rowspan="4" onclick="parent.parent.ZoomToView(<%# Eval("Lon") %>, <%# Eval("Lat") %>, 2500)" style="cursor: pointer;">
                            <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
                                Height="32" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td rowspan="10">
                            <asp:Image class="toggleRow" ImageUrl="~/Images/vertical-dots.png" runat="server" Width="32"
                                Height="32" Style="height: 30px; position: relative; float: left; cursor: pointer;" /></td>
                        </td>
                    </tr>
                    <tr class="pointDescArea">
                        <td>טקסט:</td>
                        <td rowspan="2">
                            <h1 style="color: gray"><%# Eval("Text") %></h1>
                        </td>
                    </tr>
                    <tr class="hidden">
                        <td>X:</td>
                        <td><%# Eval("Lon") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>Y:</td>
                        <td><%# Eval("Lat") %></td>
                    </tr>
                  </tr>
                </table>
            </div>
        </AlternatingItemTemplate>
    </asp:Repeater>

我需要将它的高度设置为500px并使其可滚动。

如何使这个转发器可以垂直滚动?

1 个答案:

答案 0 :(得分:1)

将转发器放在div内,设置div的高度并使用overflow-y

<div style="height: 500px; overflow-y: scroll;">
    <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False" >
    ...
    </asp:Repeater>
</div>

理想情况下,样式应该在style标签或样式表中,但我只是为了演示而将其显示为内联。