Question

I am creating an asp.net c# web application.In which i have a ajax modal PopUp,which contains a GridView.
Height of ModalPopUp is set automatically according to the height of the GridView(which depends on the Data comes inside GridView).
Now what i want is that ,when the height of Popup becomes larger then its parent page,at that time i want to reset
the height of PopUp(less then parent page ) and set a scroll bar on it.
All this i want to do dynamically client side.
For this i am using following code

    function ShowPopUp_AllPrices() {          
    $find('popupAllPrices').show();       
    return false;   
    }



<asp:LinkButton ID="lnkProduct" runat="server"></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupProduct" runat="server" BehaviorID="popupProduct"
    TargetControlID="lnkProduct" PopupControlID="pnlAddProduct"    BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlAddProduct" runat="server" Style="display: none; width: 80%; font-size: 8pt;">

 <div>
        <asp:LinkButton ID="lnkAllPrices" runat="server"></asp:LinkButton>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupAllPrices" runat="server" BehaviorID="popupAllPrices"
            TargetControlID="lnkAllPrices" PopupControlID="pnlAllPrices" BackgroundCssClass="modalBackground"  />
        <asp:Panel ID="pnlAllPrices" runat="server" Style="display: none; width: 30%; font-size: 8pt; ">
      <div class="art-blockcontent">
                        <div class="art-BlockContent-body">
                            <%--<div style="overflow: auto; width: 100%; height: 200px;">--%>
                            <table width="100%">
                                <tr>
                                    <td align="center">
                                        <div style="overflow: auto; width: 100%; "><%--height: 200px;--%>
                                            <asp:GridView ID="grvPriceTypes2" runat="server" AutoGenerateColumns="False"      AllowSorting="true"
                                                EmptyDataText="No Data Found." Width="90%" CssClass="cssGrid" BackColor="WhiteSmoke"
                                                PagerStyle-HorizontalAlign="Center" OnRowCommand="grvPriceTypes2_OnRowCommand"
                                                Enabled="false">
                                                <Columns>
                                                    <asp:BoundField DataField="StartDate" HeaderText="Start Date"      DataFormatString="{0:MM/dd/yyyy}"
                                                        ItemStyle-HorizontalAlign="Center" ItemStyle-Width="25%" />
                                                    <asp:BoundField DataField="EndDate" HeaderText="End Date"     DataFormatString="{0:MM/dd/yyyy}"
                                                        ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" />
                                                    <asp:BoundField DataField="PriceType" HeaderText="Type"      ItemStyle-HorizontalAlign="Center"
                                                        ItemStyle-Width="15%" />
                                                    <asp:BoundField DataField="Price" HeaderText="Price"      ItemStyle-HorizontalAlign="right"
                                                        ItemStyle-Width="20%" />
                                                </Columns>
                                            </asp:GridView>
                                        </div>
                                    </td>
                                </tr>
                            </table>                                                            
                        </div>
                    </div>
  </asp:Panel>
    </div>
 </asp:Panel>

Please tel me what code i should write in ShowPopUp_AllPrices() function to set height and scroll bar for that Modal Popup.

Answer 1

My problem is solved . I have just set a “max-height” style attribute of div tag which is just above of my Grid.Like :

<div style="overflow: auto;max-height:400px; width: 100%;" >

By giving “max-height” under style attribute ,when the the height of pop increase more then 400px ,it automatically give scroll bar inside that popup.