CSS asp.net ModalPopupExtender：溢出时需要显示滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2419761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
asp.net ModalPopupExtender : need to show scroll bar when overflow
提问by DavRob60
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.
我在 ModalPopupExtender 中显示了一个网格视图。屏幕分辨率过小，弹窗大到全部显示在页面上。
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.
我知道这可能是一些 CSS，但我尝试的所有方法都不起作用。
here some base css
这里有一些基本的 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
这里有一些来自 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" />
回答by DavRob60
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.
它仍然无法正常工作，但这是因为我使用了母版页，所以我使用ClientID.
(note: to center that inner asp:panelvertically, 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.)
（注意：要使内部asp:panel垂直居中，我发现的唯一方法是使用 将其放入 Table 单元格中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>
I also had to add the HorizontalAlign="Center"and ScrollBars="Auto"and to the Panel ID="OptionSelectionPanel"(the modalpopup's PopupControlID).
我还必须将HorizontalAlign="Center"和ScrollBars="Auto"和添加到Panel ID="OptionSelectionPanel"（modalpopup 的PopupControlID）。
I moved the CssClass="modalTextBox"to an inner asp:paneland restored the HorizontalAlign="Left".
我将 移动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>
回答by James
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.
尝试将整个外部表格元素包装在一个 div 中，并将 div 的高度设置为对话框的高度，然后将新 div 的 css overflow-y 属性设置为滚动。
[Edit - jQuery solution]
[编辑 - jQuery 解决方案]
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.
看看 jQuery 高度http://api.jquery.com/height/。基本上你会选择父元素并在运行时更新它的 css 属性，如下所示（未经测试）。请记住，这不是一个理想的解决方案，并且肯定会在浏览器之间进行一些不同的计算。
$(document).ready(function() {
var parentDiv = $("#yourParentDiv");
parentDiv.css("height", parentDiv.height());
parentDiv.css("overflow-y", "scroll");
});
