asp.net ModalPopupExtender：需要显示滚动条时溢出 [英] asp.net ModalPopupExtender : need to show scroll bar when overflow
问题描述
我在ModalPopupExtender中显示一个gridview。
当屏幕分辨率很小时，弹出窗口大到全部显示在页面上。
我只想添加滚动条弹出时出现这种情况。
我知道这可能是一些CSS，但是我试过都没有用。
/ p>
.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 =OptionSelectionPanelrunat =serverCssClass =modalTextBox>
< asp：UpdatePanel ID =OptionSelectionUpdatePanelrunat =serverUpdateMode =Conditional>
< Triggers>
< asp：asyncPostBackTrigger ControlID =TemplateSelection/>
< / Triggers>
< ContentTemplate>
< table class =EditRow>
< tr class =HeaderFooter>
< td colspan =3class =modalTextBoxTitle>
将选项添加到报价
< / td>
< / tr>
< tr>
< td>
制造商
< / td>
< td>
< asp：DropDownList ID =OptionManufacturerFilterrunat =server
DataSourceID =OptionManufacturerDataSourceDataTextField =Name
DataValueField =CodeAutoPostBack =True>
< / asp：DropDownList>
< / td>
< / tr>
< tr>
< td colspan =3>
< asp：GridView ID =NewOptionSelection
runat =server
DataSourceID =AvailableOptions
DataKeyNames =Option_Id
AllowPaging =
AllowSorting =True
AutoGenerateColumns =false>
< Columns>
< asp：BoundField DataField =category_DescrHeaderText =CategorySortExpression =category_Descr，subcategory_Descr，code/>
< asp：BoundField DataField =subcategory_DescrHeaderText =Sub-CategorySortExpression =subcategory_Descr，code/>
< asp：BoundFieldDataField =Manuf_NameHeaderText =ManufacturerSortExpression =Manuf_Name/>
< / Columns>< / asp：GridView>
< / td>
< / tr>
< tr class =HeaderFooter>
< td colspan =3class =中心>
< asp：Button ID =OptionSelectionCloserunat =serverText =Close/>
< / td>
< / tr>
< / table>
< / ContentTemplate>
< / asp：UpdatePanel>
< / asp：Panel>
< asp：Button runat =serverID =HiddenTargetControlForOptionSelectionModalPopupstyle =display：none/>
< cc1：ModalPopupExtender ID =OptionSelectionModalPopupExtenderrunat =server
TargetControlID =HiddenTargetControlForOptionSelectionModalPopup
PopupControlID =OptionSelectionPanel
BackgroundCssClass =modalTextBoxBackground/&
$ b
它仍然不工作，但是是因为我使用一个母版页，所以我使用 ClientID 解决这个问题。
（注意：为了使内部 asp：panel 垂直居中，我发现的唯一的东西是表格单元格使用 style =vertical-align：middle。
我还需要设置 OptionSelectionTable 因为 height =100％使用JavaScript失败。）
< 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 =OptionSelectionPanelrunat =server
HorizontalAlign =CenterScrollBars =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>
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屋！
