asp.net ModalPopupExtender: ओवरफ़्लो

Question

पर स्क्रॉल बार दिखाने की आवश्यकता है मैं मॉडलपॉपअप एक्स्टेंडर में ग्रिडव्यू प्रदर्शित करता हूं। जब स्क्रीन रेज़ोल्यूशन छोटा होता है, तो पॉप-अप पृष्ठ पर प्रदर्शित होने के लिए बड़ा होता है।

मैं ऐसा होने पर पॉप-अप में स्क्रॉल बार जोड़ना चाहता हूं।

मुझे पता है कि यह शायद कुछ सीएसएस है, लेकिन मैंने कोशिश की सभी काम नहीं किया।

यहाँ कुछ आधार सीएसएस

.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 does not show scroll bar

यह अभी भी काम नहीं कर रहा था, लेकिन यह था, क्योंकि मैं एक masterpage का उपयोग करें, तो मैं ClientID का उपयोग कर इस को हल किया।

(ध्यान दें: केंद्र के लिए भीतरी asp:panel खड़ी, केवल एक चीज मैंने पाया यह style="vertical-align:middle" का उपयोग कर एक टेबल सेल में डाल दिया था कि मैं भी OptionSelectionTable की ऊंचाई जावास्क्रिप्ट का उपयोग क्योंकि 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" (modalpopup के 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 की ऊंचाई सेट से कुछ कोड और फिर स्क्रॉल करने के लिए नई div की सीएसएस ओवरफ्लो-वाई प्रॉपर्टी सेट करें।

[संपादित करें - jQuery समाधान]

jQuery ऊंचाई http://api.jquery.com/height/ पर एक नज़र डालें। मूल रूप से आप पैरेंट तत्व का चयन करेंगे और रनटाइम पर इसकी सीएसएस गुणों को अपडेट करेंगे, इस तरह की कुछ तरह की तरह (अनचाहे)। ध्यान रखें कि यह एक आदर्श समाधान नहीं है और ब्राउज़र के बीच कुछ अलग तरीके से गणना करना सुनिश्चित है।

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