Как добавить прокрутку в форму?

Question

Пользователь может загружать изображения, а затем просматривать их, открывая их в форме. Проблема в том, что изображение слишком велико, затем оно отсекает нижнюю часть. Я хочу иметь возможность прокручивать в форме, чтобы я мог видеть изображение целиком. Форма отображает кнопку печати, загрузки и т. Д. Когда я нажимаю ссылку, чтобы открыть изображение, форма появляется. Я вижу, что в браузере уже есть свитки, но мне нужна форма, которая, похоже, имеет свой собственный свиток.

<form id="form1" runat="server"> 
    <div id ="DivForm"> 
     <div id="tabsPOD" runat="server">     
      <ul id="ulPODS" runat="server"> 

      </ul>     
     </div> 

     <asp:FormView runat="server" ID="FormView"> 
     <ItemTemplate> 
       <table class="buttons" style="top:42px"> 
        <tr> 
         <td> 
          <ul style="margin-left:10px;"> 
           <li> 
            <asp:LinkButton ID="btnPrint" runat="server" CssClass="btnPrint" OnClick="btnPrint_Click">Print</asp:LinkButton> 
           </li> 
           <li> 
            <asp:LinkButton ID="btnDownloadZip" runat="server" CssClass="btnDownload" OnClick="btnDownloadZip_Click">Download</asp:LinkButton> 
           </li> 
           <li> 
            <asp:LinkButton ID="btnDownloadImage" runat="server" CssClass="btnDownload" OnClick="btnDownloadImage_Click">Fullimage</asp:LinkButton> 
           </li> 
           <li class="noPrint" style="float:right"> 
            <a title="Close" onclick="CloseForm()" class="btnCancelSmall">Close</a> 
           </li> 
          </ul>           
         </td> 
        </tr> 
        <tr> 
         <td> 
          <asp:Image runat="server" ID="image" /> 
         </td> 
        </tr> 
       </table>       
      </ItemTemplate> 
     </asp:FormView> 

Код позади:

protected HtmlGenericControl GetDivPOD(int Count, JobDocket docket) 
    { 
     DataTable dt = new DataTable(); 
     dt.Columns.Add("Image"); 
     dt.Columns.Add("ID"); 
     dt.Columns.Add("Title"); 
     dt.Columns.Add("EITraxFlowName"); 
     dt.Columns.Add("EITraxImageID"); 
     DataRow desRow = dt.NewRow(); 
     desRow["Image"] = docket.PODImage; 
     desRow["ID"] = docket.ID; 
     desRow["Title"] = docket.DocketNo.Replace("|", ""); ; 
     desRow["EITraxFlowName"] = docket.EiTraxFlowName; 
     desRow["EITraxImageID"] = docket.EiTraxImageID; 

     dt.Rows.Add(desRow); 
     HtmlGenericControl div = new HtmlGenericControl("div"); 
     div.ID = "pod-" + Count; 
     FormView fv = new FormView(); 
     fv.ID = "FormViewPOD-" + Count; 
     fv.ItemTemplate = FormView.ItemTemplate; 
     fv.ItemCommand += new FormViewCommandEventHandler(fv_ItemCommand); 
     fv.DataBound += (sender, e) => { fv_DataBound(sender, e, "POD"); }; 
     fv.DataSource = dt; 
     fv.DataBind(); 
     div.Controls.Add(fv); 
     return div; 
    } 

Затем он подключается к базе данных, чтобы получить имя изображения, идентификатор и т.д.

Для формы:

void fv_DataBound(object sender, EventArgs e, string ImageType) 
    { 
     try 
     { 
      FormView FormView = sender as FormView; 
      if (FormView != null) 
      { 
       DataRowView drv = FormView.DataItem as DataRowView; 

       if (drv != null) 
       { 
        image.ImageUrl = @"/thumbnail.ashx?ImgFilePath=" + ConfigurationManager.AppSettings["PODFolder"] + "/" + Company.Current.CompCode + "/" + drv["Image"].ToString() + @"&width=" + ImageWidth.ToString() + "&height=" + ImageHeight.ToString(); 
       } 
      } 
     } 
    } 

Как я добавить свиток к форме? Я попытался style="overflow" к форме и DIV, но это не сработало Вот снимок экрана, что всплывающее окно, чтобы отобразить изображение выглядит следующим образом:

Answer 1

в CSS добавить:

#FormView(or whatever the id of the form/element you want the scroll added to) { 
overflow: auto; //this will add a scroll only if the page get's longer or 
       //wider than the client display. 
       //You can also force this behaviour if you want the scroll 
       // to always be there by doing something like 
       //`overflow-x:scroll; or overflow-y:scroll;` 
       //where x and y are the geometrical axis.(horizontal & vertical) 
}