Question

我在面板中包含一个转发器（使用MVC Asp.net）。滚动条出现，但我的表似乎是包装，以适应面板的水平尺寸，而不是溢出面板。

滚动条显示，但它没有做任何事情。

<asp:Panel ID="pnlMultipleBeneficiaries" ScrollBars = "Horizontal" style="overflow:scroll" runat=""server" >
<div class="section" >
       <fieldset>
        <legend class="labels">Added Beneficiaries</legend>

            <asp:Repeater ID="rptMultipleBeneficiaryDetails" runat="server">
                <HeaderTemplate>
                    <table border = 1> 
                    <tr>
                        <td class="labels displayInput_noWidth">First Name</td>
                        <td class="labels displayInput_noWidth">Last Name</td>
                        <td class="labels displayInput_noWidth">Status</td>
                        <td class="labels displayInput_noWidth">Birthday</td>
                        <td class="labels displayInput_noWidth">Parent</td>
                        <td class="labels displayInput_noWidth">Street</td>
                        <td class="labels displayInput_noWidth">City</td>
                        <td class="labels displayInput_noWidth">Province</td>
                        <td class="labels displayInput_noWidth">Postcode</td>
                        <td class="labels displayInput_noWidth">Country</td>
                        <td class="labels displayInput_noWidth">Phone Number</td>
                        <td class="labels displayInput_noWidth">HasReplied</td>
                        <td class="labels displayInput_noWidth">Something Else</td>

                    </tr>                   
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td><%#DataBinder.Eval(Container.DataItem, "BeneficiaryFirstName")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "BeneficiaryLastName")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "BeneficiarySin")%></td>
                        <td><%#DateTime.Parse(DataBinder.Eval(Container.DataItem, "BeneficiaryBirthday").ToString()).ToString("MM/dd/yyyy")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "Parent")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "Street1")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "City")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "ProvinceAbbreviation")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "Postcode")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "CountryDescription")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "HasReplied")%></td>
                        <td><%#DataBinder.Eval(Container.DataItem, "IsGrantApplicationFormReceived")%></td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>         
        </fieldset>
            </div>
   </asp:Panel>

我确实尝试在面板中使用style =“overflow：auto”，但它没有做任何事情。救命？

Answer 1

您没有设置面板的宽度。首先设置面板的宽度，然后为它们分配overflow:scroll属性。

<asp:Panel ID="pnlMultipleBeneficiaries" ScrollBars = "Horizontal" style="overflow:scroll" runat="server" Width="500px">

您还可以尝试修复<div class="section">的宽度并在此类中设置overflow属性

.section
{
 width:500px;
 overflow-x:auto;
}

基本上，当您拥有overflow的固定宽度并且具有parent属性时，overflow属性将起作用。

Answer 2

Sis，只需将overflow:auto;更改为overflow:scroll;

即可

Answer 3

为我工作（浏览器 - ＆gt; Chrome版本59.0.3071.115（官方版本）（64位））以及Internet Explorer 11版本11.0.9600.18697

用于剑道网格，两者都有效。

CSS代码：

.k-grid-content {
    overflow: scroll;
}

.k-grid-content {
    overflow: auto;
}

我的asp.net面板上的水平滚动条不会滚动

3 个答案: