asp.net ModalPopupExtender: besoin d'afficher la barre de défilement en cas de débordement

Question

J'affiche un gridview dans un ModalPopupExtender. Lorsque la résolution de l'écran est trop petite, la fenêtre contextuelle est trop grande pour être affichée sur la page.

Je veux juste ajouter une barre de défilement à la pop-up lorsque cela se produit.

Je sais que c'est probablement du CSS, mais tout ce que j'ai essayé n'a pas fonctionné.

ici une css de base

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

} 

ici un code de la 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

Je viens de le trouver.

ModalPopupExtender does not show scroll bar

il ne fonctionnait toujours pas, mais c'était parce que j'utilise un masterpage, donc je résolu cela en utilisant le ClientID.

(note: au centre qui intérieur asp:panel verticalement, la seule chose que j'ai trouvé de le mettre dans une cellule de tableau à l'aide style="vertical-align:middle" Je dois aussi régler la hauteur de OptionSelectionTable en utilisant JavaScript parce que height="100%" échouent avec un certain navigateur..)

<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> 

Je devais aussi ajouter le HorizontalAlign="Center" et ScrollBars="Auto" et à la Panel ID="OptionSelectionPanel" (PopupControlID de la ModalPopup).

J'ai déplacé le CssClass="modalTextBox" à l'intérieur asp:panel et a restauré le .

<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

Essayez d'envelopper toute l'élément de table externe dans un div et mis à la hauteur de votre boîte de dialogue de la hauteur de la div et puis définissez la propriété css overflow-y de la nouvelle div pour faire défiler.

[Edit - solution jQuery]

Jetez un oeil à la hauteur jQuery http://api.jquery.com/height/. Fondamentalement, vous devez sélectionner l'élément parent et mettre à jour ses propriétés css à l'exécution, avec quelque chose de genre comme ci-dessous (non testé). Gardez à l'esprit que ce n'est pas une solution idéale et est sûr de calculer un peu différemment entre les navigateurs.

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