asp.net ModalPopupExtender: необходимо показать полосу прокрутки при переполнении

Question

Я отображаю вид сетки в ModalPopupExtender. Когда разрешение экрана слишком мало, всплывающее окно должно быть большим, чтобы все отображалось на странице.

Я просто хочу добавить полосу прокрутки во всплывающее окно, когда это произойдет.

Я знаю, что это, вероятно, какой-то CSS, но все, что я пробовал, не сработало.

здесь какая-то базовая css

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

}

вот код из 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

Я только что нашел это.

ModalPopupExtender не показывает полосу прокрутки

это все еще не работало, но это было потому, что я использую мастер-страницу, поэтому я решил это с помощью ClientID.

(примечание: для центрирования этого внутреннего asp:panel по вертикали единственное, что я обнаружил, это поместить его в ячейку таблицы, используя style="vertical-align:middle". Мне также нужно установить высоту OptionSelectionTable с помощью JavaScript, потому что height="100%" не работает с некоторым браузером.)

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

Я также должен был добавить HorizontalAlign="Center" и ScrollBars="Auto" и к Panel ID="OptionSelectionPanel" (PopupControlID модальпопа).

Я переместил CssClass="modalTextBox" во внутренний asp:panel и восстановил 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

Попробуйте обернуть весь элемент внешней таблицы в div и установить высоту div в высоту вашего диалога, а затем установить свойство scss overflow-y нового div для прокрутки.

[Редактировать - решение jQuery]

Посмотрите на высоту jQuery http://api.jquery.com/height/. Обычно вы выбираете родительский элемент и обновляете его свойства CSS во время выполнения, что-то вроде этого ниже (не проверено). Имейте в виду, что это не идеальное решение, и оно рассчитывается по-разному для разных браузеров.

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