ModalPopupExtender HTML сколлинг контента - PullRequest
Новая
       7

ModalPopupExtender HTML сколлинг контента

0 голосов
/ 07 февраля 2012

Я бьюсь головой о стену, пытаясь найти способ предотвратить прокрутку строки заголовка в моем модальном всплывающем окне, одновременно позволяя прокрутить содержимое.Мой HTML - слабый соус, но кажется, что должен быть способ достичь этого.

Это базовый вид заголовка.

 __________
|Header  |X| 
|________|_|
|Content   |
|          |
|          |
|          |
\__________/

В настоящее время, когда содержимое переполняет контейнер, я получаю полосу прокрутки, которая прокручивает все содержимое IE 

 ____________
|Header  |X[^]
|________|_| |
|Content   | |
|          | |
|          | | 
|          |_|
\__________[v]

Я хотел бы, чтобы полоса прокрутки отображалась навнутри блока контента, а не прокручивать заголовок. 

 __________
|Header  |X| 
|________|_|
|Content [^]
|        | |
|        | |
|        | |
\________[v]

Это HTML-код для этого модального элемента управления. 

<input id="dummy" type="button" style="display: none" runat="server" />

<asp:ModalPopupExtender CancelControlID="Close" runat="server" ID="mpeThePopup" TargetControlID="dummy"
    PopupControlID="pnlModalPopUpPanel" BackgroundCssClass="modalBackground" PopupDragHandleControlID="Title" />
<asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup" Width="1280px" Height="800px">
    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server">
        <ContentTemplate>
            <table id="ContentTableTag" runat="server" cellpadding="0" cellspacing="0" style="width: 100%;
                height: 100%;">
                <tr>
                    <td id="Title" runat="server" style="background-color: rgb(79,82,90); text-align: left;
                        height: 28px; width: 97%; color: White;" nowrap="nowrap">
                        <h4 style="margin: 0px 0px 0px 5px;">
                            <asp:Label ID="LblSectionTitle" runat="server" Text="Modal"></asp:Label>
                        </h4>
                    </td>
                    <td id="Close" runat="server" style="background-color: rgb(79,82,90); text-align: right;
                        height: 28px; width: 3%" nowrap="nowrap">
                        <asp:ImageButton ID="ibClose" runat="server" Style="margin-right: 5px;" ImageUrl="~/WLImages/MLS/button_close.png"
                            ToolTip="Close"/>
                    </td>
                </tr>
                <tr class="standardFont" >
                    <td id="MainContentHolder" colspan="2" align="left" style="top: 0px; vertical-align: top; width: 100%; height: 100%" />
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

1 Ответ

0 голосов
/ 07 февраля 2012

Это просто идея - попробуйте добавить overflow:scroll в области основного контента, как показано ниже: 

 <td id="MainContentHolder" colspan="2" align="left" 
        style="top: 0px; vertical-align: top; 
        width: 100%; height: 100%; overflow:scroll;"   
 />
...