asp.net ModalPopupExtender:溢出时需要显示滚动条 [英] asp.net ModalPopupExtender : need to show scroll bar when overflow
问题描述
我在 ModalPopupExtender 中显示了一个网格视图.屏幕分辨率小,弹窗大到全部显示在页面上.
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.
我知道这可能是一些 CSS,但我尝试的所有方法都不起作用.
I know it's probably some CSS, but all I tried did not work.
这里有一些基本的 css
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;
}
这里有一些来自 aspx 的代码
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" />
推荐答案
我刚找到这个.
它仍然无法正常工作,但这是因为我使用了母版页,所以我使用 ClientID
解决了这个问题.
it was still not working, but it was because I use a masterpage, so I solved this using the ClientID
.
(注意:要使内部 asp:panel
垂直居中,我发现的唯一方法是使用 style="vertical-align:middle"代码>.我还需要使用 JavaScript 设置
OptionSelectionTable
的高度,因为 height="100%"
在某些浏览器中失败.)
(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>
我还必须将 HorizontalAlign="Center"
和 ScrollBars="Auto"
添加到 Panel ID="OptionSelectionPanel"
(modalpopup 的 PopupControlID
).
I also had to add the HorizontalAlign="Center"
and ScrollBars="Auto"
and to the Panel ID="OptionSelectionPanel"
(the modalpopup's PopupControlID
).
我将 CssClass="modalTextBox"
移动到内部 asp:panel
并恢复了 HorizontalAlign="Left"
.
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>
这篇关于asp.net ModalPopupExtender:溢出时需要显示滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!