asp.net ModalPopupExtender : need to show scroll bar when overflow

Question

I display a gridview in a ModalPopupExtender. When the screen resolution is to small, the pop-up is to big to all be displayed on the page.

I just want to add scroll bar to the pop-up when this happen.

I know it's probably some CSS, but all I tried did not work.

here some base css

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

}

here some code from the 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

Try wrapping the entire outer table element in a div and set the div's height to the height of your dialog and then set the new div's css overflow-y property to scroll.

[Edit - jQuery solution]

Have a look at jQuery height http://api.jquery.com/height/ . Basically you would select the parent element and update it's css properties at runtime, with something sorta like this below (untested). Keep in mind this is not an ideal solution and is sure to calculate somewhat differently between browsers.

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

Answer 2

I just found this.

ModalPopupExtender does not show scroll bar

it was still not working, but it was because I use a masterpage, so I solved this using the "ClientID".

(note: to center that inner asp:panel vertically, the only thing i found was to put it into a Table cell using style="vertical-align:middle"". I also need set OptionSelectionTable's height using JavaScript because height="100%" fail with some browser.)

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

I also had to add the HorizontalAlign="Center" and ScrollBars="Auto" and to the Panel ID="OptionSelectionPanel" (the modalpopup's PopupControlID).

I moved the CssClass="modalTextBox" to an inner asp:panel and restored the 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>