asp.net ModalPopupExtender: należy wyświetlić pasek przewijania po przepełnieniu

Question

Wyświetlam gridview w ModalPopupExtender. Gdy rozdzielczość ekranu jest niewielka, wyskakujące okienko ma duże znaczenie dla wszystkich wyświetlanych na stronie.

Po prostu chcę dodać pasek przewijania do wyskakującego okienka, gdy tak się stanie.

Wiem, że to prawdopodobnie część CSS, ale wszystko, co próbowałem, nie działało.

tutaj niektóre css baza

.modalTextBoxBackground 
{ 
    background-color:Gray; 
    filter:alpha(opacity=70); 
    opacity:0.7; 
} 
.modalTextBox 
{ 
    border: 1px solid #FFFFFF; 
    background-color: #0066CC; 
    color: #00FFFF; 

} 

tu jakiś kod z aspx

<asp:Panel ID="OptionSelectionPanel" runat="server" CssClass="modalTextBox"> 
      <asp:UpdatePanel ID="OptionSelectionUpdatePanel" runat="server" UpdateMode="Conditional" > 
      <Triggers> 
       <asp:asyncPostBackTrigger ControlID="TemplateSelection" /> 
      </Triggers> 
      <ContentTemplate> 

      <table class="EditRow"> 
      <tr class="HeaderFooter"> 
      <td colspan="3" class="modalTextBoxTitle"> 
       Add options to Quote 
      </td> 
      </tr> 
      <tr> 
      <td> 
       Manufacturer 
      </td> 
      <td> 
       <asp:DropDownList ID="OptionManufacturerFilter" runat="server" 
        DataSourceID="OptionManufacturerDataSource" DataTextField="Name" 
        DataValueField="Code" AutoPostBack="True" > 
       </asp:DropDownList> 
      </td> 
      </tr> 

          <tr> 
      <td colspan="3"> 
       <asp:GridView ID="NewOptionSelection" 
           runat="server" 
           DataSourceID="AvailableOptions" 
           DataKeyNames="Option_Id" 
           AllowPaging="True" 
           AllowSorting="True" 
           AutoGenerateColumns="false"> 
       <Columns> 
        <asp:BoundField DataField="category_Descr" HeaderText="Category" SortExpression="category_Descr,subcategory_Descr,code" /> 
        <asp:BoundField DataField="subcategory_Descr" HeaderText="Sub-Category" SortExpression="subcategory_Descr,code" /> 
        <asp:BoundField DataField="Manuf_Name" HeaderText="Manufacturer" SortExpression="Manuf_Name"/> 
       </Columns></asp:GridView> 
      </td> 
      </tr> 
      <tr class="HeaderFooter"> 
      <td colspan="3" class="Center"> 
       <asp:Button ID="OptionSelectionClose" runat="server" Text="Close" /> 

      </td> 
      </tr> 
      </table> 
      </ContentTemplate> 
      </asp:UpdatePanel> 
     </asp:Panel> 
     <asp:Button runat="server" ID="HiddenTargetControlForOptionSelectionModalPopup" style="display:none"/>  
     <cc1:ModalPopupExtender ID="OptionSelectionModalPopupExtender" runat="server" 
           TargetControlID="HiddenTargetControlForOptionSelectionModalPopup" 
           PopupControlID="OptionSelectionPanel" 
           BackgroundCssClass="modalTextBoxBackground" /> 

Answer 1

Właśnie znalazłem to.

ModalPopupExtender does not show scroll bar

było nadal nie działa, ale to dlatego, że używam masterpage, więc rozwiązać ten pomocą ClientID.

(uwaga: do centrum, że wewnętrzna asp:panel pionowo, jedyne co znalazłem było umieścić go w komórce tabeli przy użyciu style="vertical-align:middle" również trzeba ustawić wysokość OptionSelectionTable „s przy użyciu JavaScript ponieważ height="100%" nie z jakiejś przeglądarce.).

<script type="text/javascript"> 
    function pageLoad() { 
     $get('<%= OptionSelectionPanel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
     $get('<%= OptionSelectionTable.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
    } 
    </script> 

miałem też dodać HorizontalAlign="Center" i ScrollBars="Auto" i do Panel ID="OptionSelectionPanel" (The ModalPopup na PopupControlID).

Przesunąłem CssClass="modalTextBox" do wewnętrznego asp:panel i przywróciłem HorizontalAlign="Left".

<asp:Panel ID="OptionSelectionPanel" runat="server" 
      HorizontalAlign="Center" ScrollBars="auto"> 
      <asp:UpdatePanel ID="OptionSelectionUpdatePanel" 
          runat="server" 
          UpdateMode="Conditional" > 
      <Triggers> 
       <asp:asyncPostBackTrigger ControlID="TemplateSelection" /> 
      </Triggers> 
      <ContentTemplate> 
       <table ID="OptionSelectionTable" 
         runat="server" 
         border="0" 
         cellpadding="0" 
         cellspacing="0"> 
         <tr> 
         <td style="vertical-align:middle">  
           <asp:Panel ID="OptionSelectionInnerPanel" 
              runat="server" 
              HorizontalAlign="Left" 
              CssClass="modalTextBox"> 
            <table class="EditRow"> 


               ...... 


            </table> 
           </asp:Panel> 
        </td></tr></table> 
      </ContentTemplate> 
      </asp:UpdatePanel> 
     </asp:Panel> 

Answer 2

Spróbuj zawijania cały element tabeli zewnętrznej w div i ustawić wysokość div do wysokości Twojego dialogowe następnie ustaw nową właściwość overflow-y nowego div div, aby przewinąć.

[Edycja - rozwiązanie jQuery]

Wystarczy popatrzeć na jQuery wysokości http://api.jquery.com/height/. Zasadniczo można wybrać element nadrzędny i zaktualizować jego właściwości css w czasie wykonywania, z czymś podobnym poniżej (niesprawdzonym). Należy pamiętać, że nie jest to idealne rozwiązanie i na pewno obliczy nieco inaczej między przeglądarkami.

$(document).ready(function() { 
    var parentDiv = $("#yourParentDiv"); 
    parentDiv.css("height", parentDiv.height()); 
    parentDiv.css("overflow-y", "scroll"); 
});