开发者

Ajax ModalPopup width problem

I have a modalpopupextender in one of my page. That modal is in a gridview. It works fine, the only problem is that its width is at around 90% of the screen. I do not want to hard code a width (that works) because since the text length can change, it might go out of the panel and that is not really good looking.

<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" r开发者_StackOverflow社区unat="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>

There is more code in the ASP panel, but it is not important for this issue since it is only more divs and linkbuttons.

I tried putting width inherit and auto, but it had no effect. I tried putting a value in the div over the modal popup, but that creates problems in the gridview columns width, so I ruled that option out. I think there might be something wrong with the way I set the width to auto or something but I just cannot find it.

Also, I am using IE7 (company restriction)


It's hard to understand what you are getting and what you are trying to get. some screen-shots would greatly help. Meanwhile:

That modal is in a gridview

I would not put a modalpopupextender inside a gridview.

The problem it the popup's content is repeated for every row in your gridview, that generate a lot of code to handle all those popup. Also note that all the html and images inside the panel are loaded in the page, even if they are not shown.

I suggest that you put your extender outside the gridview. To handle that, you have many modifications to do. In sumarry, you put the gridview as asyncpostbacktrigger of your pnlImage update panel. Set the TargetControlID to a hidden button so you could show your ModalPopupExtender from Code behind. replace your lbName by a linkbuton and set is as a command in the gGridView_RowCommand event and use e.CommandName and e.CommandArgument to manually bind the controls in the modal popup in code behind, you may use a repeater or a datalist that bind to a datasource that return only one item if you don't want to handle all things manually.

This way, your code will be far more effective and you will be able to use the option that you ruled out.


I do not understand why, but that code worked for me:

<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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜