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

Answer 1

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>

Answer 2

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");
});