Ajax ModalPopup проблема ширины - PullRequest
Новая
       26

Ajax ModalPopup проблема ширины

2 голосов
/ 21 апреля 2011

У меня есть modalpopupextender на одной из моих страниц. Этот модал в gridview. Работает нормально, единственная проблема в том, что его ширина составляет около 90% экрана. Я не хочу жестко кодировать width (это работает), потому что, поскольку длина текста может измениться, она может выйти за пределы панели, и это не очень хорошо выглядит. 

<div runat="server">
    <asp:ModalPopupExtender ID="ModalPopupInfo" runat="server" 
        CancelControlID="btnClose" OnCancelScript="HideModalPopup()"
        TargetControlID="lbName" PopupControlID="pnlInfo" Drag="True" 
        BackgroundCssClass="ModalPopupBg" DynamicServicePath="" Enabled="True"/>
</div>
<asp:LinkButton ID="lbName" runat="server"  ></asp:LinkButton>
<div style="width:inherit;">
<asp:Panel ID="pnlInfo" runat="server" Font-Names="Times New Roman" UpdateMode="Conditional" EnableViewState="true" style="display:none; background-color:#FFFFFF; padding:20px; margin:50px; border:3px solid #4B0303; color:Black; width:auto;"  >
    <div runat="server" class="divTable" style="width:inherit;">
        <div runat="server" class="divRow" style="text-align:center; width:300px; float:left;">
            <asp:UpdatePanel ID="pnlImage" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Accordion ID="Accordion" runat="server" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"  AutoSize="None" SelectedIndex="-1" RequireOpenedPane="false" SuppressHeaderPostbacks="true" Height="50px" Width="360px" Enabled= "false">
                        <Panes>
                            <asp:AccordionPane ID="AccordionPane" runat="server">
                                <Header>
                                    <asp:Image ID="imgUser" runat="server" ImageAlign="Middle" Width="100px" Height="100px" EnableViewState="true"/>
                                    <asp:Label ID="lblUsrCode" runat="server" Visible="false" Text='<%# Eval("usr_cd") %>'></asp:Label>
                                </Header>
                                <Content>
                                    <asp:AsyncFileUpload ID="AsyncFileUpload" runat="server" OnUploadedComplete="OnUpdateComplete" />
                                </Content>
                                </asp:AccordionPane>
                            </Panes>
                        </asp:Accordion>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="lbUpdate" EventName="Click"/>
                </Triggers>
            </asp:UpdatePanel>
            <asp:UpdatePanel runat="server" UpdateMode="Always">
                <ContentTemplate>
                    <asp:LinkButton ID="lbUpdate" runat="server" Visible="false" OnClick="lbUpdate_Click" OnClientClick="__doPostBack('pnlImage', '');"/>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div><br /><br />
    </asp:Panel>
</div>

На панели ASP больше кода, но это не важно для этой проблемы, так как оно больше divs и linkbuttons.

Я попытался выставить width и auto, но это не дало эффекта. Я попытался поместить значение в div поверх модального всплывающего окна, но это создает проблемы с шириной столбцов gridview, поэтому я исключил эту опцию. Я думаю, что может быть что-то не так с тем, как я устанавливаю ширину на авто или что-то в этом роде, но я просто не могу найти это.

Кроме того, я использую IE7 (ограничение компании)

Ответы [ 2 ]

0 голосов
/ 28 июня 2011

Я не понимаю, почему, но этот код работал для меня: 

<asp:GridView runat="server" AutoGenerateColumns="False" CellPadding="4" Font-Bold="False"
                ForeColor="#333333" ID="gvData" BorderColor="#333333" AllowSorting="True" OnSorting="gvData_Sorting"
                OnRowDataBound="gvData_RowDataBound" ShowHeaderWhenEmpty="True" 
                AllowPaging="true" PageSize="50"
                Width="625px" SelectedIndex="0" 
                onpageindexchanged="gvData_PageIndexChanged" onpageindexchanging="gvData_PageIndexChanging" meta:resourcekey="gvDataResource1"
                >
                <AlternatingRowStyle HorizontalAlign="Left" BackColor="White"></AlternatingRowStyle>
                <Columns>
                    <asp:TemplateField HeaderText="Name" SortExpression="disp_nm"
                        AccessibleHeaderText="Name" ItemStyle-Wrap="False" 
                        ItemStyle-Width="190px" HeaderStyle-Width="190px" meta:resourcekey="TemplateFieldResource1"
                        >
                        <ItemTemplate>
                            <asp:ModalPopupExtender ID="ModalPopupInfo" runat="server" 
                                CancelControlID="btnClose" OnCancelScript="HideModalPopup()"
                                TargetControlID="lbName" PopupControlID="pnlInfo" Drag="True" 
                                BackgroundCssClass="ModalPopupBg" DynamicServicePath="" Enabled="True"/>
                             <asp:LinkButton ID="lbName" runat="server"  ></asp:LinkButton>
                             <asp:Panel ID="pnlInfo" runat="server" Font-Names="Times New Roman" UpdateMode="Conditional" EnableViewState="true" 
                                style="display:none; background-color:#FFFFFF; padding:20px; margin:50px; border:3px solid #4B0303; color:Black; 
                                width:350px;position:absolute;"
                                >
                                <div runat="server" class="divTable" style="width:350px;">

                                    <div runat="server" class="divRow" style="text-align:center; width:auto; float:none;">
0 голосов
/ 25 апреля 2011

Трудно понять, что вы получаете и что вы пытаетесь получить. некоторые скриншоты очень помогли бы. В то же время:

Этот модал в gridview

Я бы не ставил modalpopupextender внутри gridview.

Проблема в том, что содержание всплывающего окна повторяется для каждой строки в gridview, которая генерирует много кода для обработки всего этого всплывающего окна. Также обратите внимание, что все html и изображения внутри панели загружаются на страницу, даже если они не отображаются.

Я предлагаю вам установить расширитель за пределы gridview. Чтобы справиться с этим, у вас есть много модификаций. В целом, вы помещаете gridview как asyncpostbacktrigger вашей pnlImage панели обновления. Установите TargetControlID на скрытую кнопку, чтобы вы могли показать свой ModalPopupExtender из кода позади . замените ваше lbName на кнопку ссылки, и установите в качестве команды в событии gGridView_RowCommand и используйте e.CommandName и e.CommandArgument, чтобы вручную связать элементы управления в модальном всплывающем окне в коде позади, вы можете использовать повторитель или список данных, которые связывают к источнику данных, который возвращает только один элемент, если вы не хотите обрабатывать все вручную.

Таким образом, ваш код будет намного эффективнее, и вы сможете использовать опцию, которую вы исключили.

...