asp.net ModalPopupExtender：需要显示时溢出滚动条 [英] asp.net ModalPopupExtender : need to show scroll bar when overflow
问题描述
我显示一个ModalPopupExtender一个gridview。
当屏幕分辨率为小，弹出的是大，全部显示在网页上。
我只是想滚动条添加到弹出时，这种情况发生。
我知道这可能是一些CSS，但我试过没有工作。
下面一些基本的CSS
.modalTextBoxBackground
{
背景颜色：灰色;
过滤器：α（不透明= 70）;
不透明度：0.7;
}
.modalTextBox
{
边框：1px的固体#FFFFFF;
背景颜色：＃0066CC;
颜色：＃00FFFF;}
在这里从ASPX一些code
＆LT; ASP：面板ID =OptionSelectionPanel=服务器的CssClass =modalTextBox＆GT;
＆LT; ASP：的UpdatePanel ID =OptionSelectionUpdatePanel=服务器的UpdateMode =条件＆GT;
＆LT;＆触发器GT;
＆LT; ASP：asyncPostBackTrigger控件ID =TemplateSelection/＆GT;
＆LT; /触发器＆GT;
＆LT;＆的ContentTemplate GT; ＆LT;表类=EditRow＆GT;
＆所述; TR类=的HeaderFooter＆GT;
＆LT; TD合并单元格=3级=modalTextBoxTitle＆GT;
选项添加到报价
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
生产厂家
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：DropDownList的ID =OptionManufacturerFilter=服务器
的DataSourceID =OptionManufacturerDataSourceDataTextField =姓名
DataValueField =code的AutoPostBack =真＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT; ＆所述; TR＆GT;
＆所述; TD列跨度=3＆GT;
＆LT; ASP：GridView控件ID =NewOptionSelection
=服务器
的DataSourceID =AvailableOptions
的DataKeyNames =Option_Id
AllowPaging =真
AllowSorting =真
的AutoGenerateColumns =假＆GT;
＆LT;柱体和GT;
＆LT; ASP：BoundField的数据字段=category_Descr的HeaderText =类别SORTEX pression =category_Descr，subcategory_Descr，code/＆GT;
＆LT; ASP：BoundField的数据字段=subcategory_Descr的HeaderText =子类别SORTEX pression =subcategory_Descr，code/＆GT;
＆LT; ASP：BoundField的数据字段=Manuf_Name的HeaderText =制造商SORTEX pression =Manuf_Name/＆GT;
＆LT; /专栏＆GT;＆LT; / ASP：GridView的＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR类=的HeaderFooter＆GT;
＆LT; TD合并单元格=3级=中心＆GT;
＆LT; ASP：按钮的ID =OptionSelectionClose=服务器文本=关闭/＆GT; ＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /＆的ContentTemplate GT;
＆LT; / ASP：的UpdatePanel＆GT;
＆LT; / ASP：面板＆gt;
＆LT; ASP：按钮=服务器ID =HiddenTargetControlForOptionSelectionModalPopup的风格=显示：无/＆GT;
＆LT; CC1：ModalPopupExtender ID =OptionSelectionModalPopupExtender=服务器
的TargetControlID =HiddenTargetControlForOptionSelectionModalPopup
PopupControlID =OptionSelectionPanel
BackgroundCssClass =modalTextBoxBackground/＆GT;
我刚刚发现这一点。
它仍然没有工作，但就因为我用的是母版，让我解决了这个使用客户端ID 。
（注：居中内心的 ASP：面板垂直，我发现的唯一的事情是用把它变成一个表格单元格风格= 垂直对齐：中间的。
我还需要设置的 OptionSelectionTable 使用JavaScript的高度，因为 HEIGHT =100％失败，一些浏览器。）
＆LT;脚本类型=文/ JavaScript的＆GT;
功能页面加载（）{
$得到（'＆LT;％= OptionSelectionPanel.ClientID％GT;'）。style.height = document.documentElement.clientHeight * 0.9 +PX
$得到（'＆LT;％= OptionSelectionTable.ClientID％GT;'）。style.height = document.documentElement.clientHeight * 0.9 +PX
}
＆LT; / SCRIPT＆GT;
我也不得不添加 HorizontalAlign =中心和滚动条=自动，并在面板ID =OptionSelectionPanel（该modalpopup的 PopupControlID ）。
我感动的的CssClass =modalTextBox来内 ASP：面板并恢复了 HorizontalAlign =左。
＆LT; ASP：面板ID =OptionSelectionPanel=服务器
HorizontalAlign =中心滚动条=自动＆GT;
＆LT; ASP：的UpdatePanel ID =OptionSelectionUpdatePanel
=服务器
的UpdateMode =条件＆GT;
＆LT;＆触发器GT;
＆LT; ASP：asyncPostBackTrigger控件ID =TemplateSelection/＆GT;
＆LT; /触发器＆GT;
＆LT;＆的ContentTemplate GT;
＆LT;表ID =OptionSelectionTable
=服务器
边界=0
CELLPADDING =0
CELLSPACING =0＆GT;
＆所述; TR＆GT;
＆LT; TD风格=垂直对齐：中间的＆GT;
＆LT; ASP：面板ID =OptionSelectionInnerPanel
=服务器
HorizontalAlign =左
的CssClass =modalTextBox＆GT;
＆LT;表类=EditRow＆GT;
......
＆LT; /表＆gt;
＆LT; / ASP：面板＆gt;
＆LT; / TD＆GT;＆LT; / TR＆GT;＆LT; /表＆gt;
＆LT; /＆的ContentTemplate GT;
＆LT; / ASP：的UpdatePanel＆GT;
＆LT; / ASP：面板＆gt;
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.
I know it's probably some CSS, but all I tried did not work.
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;
}
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" />
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.
(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>
I also had to add the HorizontalAlign="Center" and ScrollBars="Auto" and to the Panel ID="OptionSelectionPanel" (the modalpopup's PopupControlID).
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屋！
