2013-03-14 103 views
0

我有一个包裹在面板内的中继器(使用MVC Asp.net)。滚动条出现,但我的桌子似乎是包装,以适应面板的水平尺寸,而不是溢出通过面板。我的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”,但它什么也没做。帮帮我?

+0

尝试'风格= “overfllow:滚动”' – Shouvik 2013-03-14 20:28:26

回答

3

您没有设置面板的宽度。因此,首先设置面板的宽度,然后为其分配overflow:scroll属性。

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

一两件事你可以尝试,你可以修复的<div class="section">宽度和在这个类

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

基本上设置overflow属性点overflow属性将当你具有固定宽度工作parentoverflow属性与他们。

+0

大,是工作! – silvenwolf 2013-03-14 20:47:42

+0

好吧,这是有道理的 - 那么我可以在课堂上设置overflow-x和overflow-y?我直接尝试,如:style =“overflow-y”,并且它不被识别 – silvenwolf 2013-03-14 20:53:14

+0

“overflow:y”的条件相同。只需在该类中设置高度,因为我们已经设置了宽度,然后编写“overflow-y:auto”。它会工作:) – Sachin 2013-03-14 20:55:23

0

SIS,只要改变overflow:auto;overflow:scroll;

+0

我必须这样做,并在面板工作的大小相应的表。 PS我是女性... – silvenwolf 2013-03-15 16:32:05

+0

哦,对不起,我会改变它。 – 2013-03-16 18:15:49

+0

哈哈感谢塔库尔:) – silvenwolf 2013-03-19 14:21:09

0

为我工作(浏览器 - > Chrome操作系统版本59.0.3071.115(正式版本)(64位))以及Internet Explorer的版本11 11.0.9600.18697

用于Kendo Grid,两者都在工作。

CSS代码:

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

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