asp.net ModalPopupExtender: должен показать полосу прокрутки когда переполнение
Я отображаю gridview в ModalPopupExtender. Когда разрешение экрана к маленькому, всплывающее окно к большому ко всем быть отображенным на странице.
Я просто хочу добавить полосу прокрутки к всплывающему окну, когда это происходит.
Я знаю, что это - вероятно, некоторый CSS, но все, что я попробовал, не работало.
здесь некоторая основная CSS
.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" />
2 ответа
Я только что нашел это.
ModalPopupExtender не показывает полосу прокрутки
он все еще не работал, но это произошло из-за того, что я использую главную страницу, поэтому я решил эту проблему с помощью ClientID .
(примечание: чтобы центрировать этот внутренний asp: panel по вертикали, единственное, что я нашел, так это поместить его в ячейку таблицы, используя 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>
Мне также пришлось добавить HorizontalAlign = "Center" и ScrollBars = "Auto" и к Panel ID = "OptionSelectionPanel" ( PopupControlID модального всплывающего окна).
Я переместил CssClass = "modalTextBox" на внутреннюю asp: панель и восстановил 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>
Попробуйте обернуть весь внешний элемент таблицы в div и установить высоту div равной высоте вашего диалога, а затем установить свойство overflow-y нового div css для прокрутки.
[Изменить - решение jQuery]
Посмотрите высоту jQuery http://api.jquery.com/height/ . В основном вы должны выбрать родительский элемент и обновить его свойства css во время выполнения, что-то вроде этого ниже (непроверено). Имейте в виду, что это не идеальное решение, и в разных браузерах он наверняка будет вычисляться по-разному.
$(document).ready(function() {
var parentDiv = $("#yourParentDiv");
parentDiv.css("height", parentDiv.height());
parentDiv.css("overflow-y", "scroll");
});