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

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

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

Comments

[Keith Rousseau]

Can you post the relevant css and html?

[DavRob60]

I just added the code to the question

[DavRob60]

last thing i dis was adding "<asp:Panel ID="ScrollBarsPanel" runat="server" ScrollBars="Auto" Height="500px"> over the <table class="EditRow"> that fix the popop height, but i cannot set if to something like 90%. i also tryed thing like <asp:Panel ID="ScrollBarsPanel" runat="server" ScrollBars="Auto" style="max-height:90%;" > or others variation in CSS be nothing help.

[DavRob60]

"set the div's height to the height of your dialog" that the porblem, i dont want a fixed height , just a maximum height before showing the scroll bars.

[James]

You can use jQuery or some other tool to calculate the height from elements at runtime on the client, and set the css accordingly. But other than that i'm pretty sure that what your trying to do with percentage based height is not currently possible with html/css.

[James]

You might consider building something with Silverlight or Flash if this is a must.

[DavRob60]

ok, maybe something with jQuery, or maybe javascript. Silverlight or Flash are not considered. need more info on that trail...

[James]

@DavRob60 - Check my last edit on my post and give that a try.

[DavRob60]

@James - I did not go your way because I'm not at ease with Jquery (never used it at all). thanks anyway.