Problème Ajax ModalPopup width

Question

J'ai un modalpopupextender dans un de mes page. Ce modal est dans un gridview. Cela fonctionne bien, le seul problème est que sa largeur est d'environ 90% de l'écran. Je ne veux pas coder un width (cela fonctionne) parce que la longueur du texte peut changer, il peut sortir du panneau et ce n'est pas vraiment beau.

<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> 

Il y a plus de code dans le panneau ASP, mais il n'a pas d'importance pour cette question car il est seulement plus divs et linkbuttons.

J'ai essayé de mettre largeur inherit et auto, mais cela n'a eu aucun effet. J'ai essayé de mettre une valeur dans le div sur le popup modal, mais cela crée des problèmes dans la largeur des colonnes gridview, donc j'ai exclu cette option. Je pense qu'il y a peut-être quelque chose qui ne va pas dans la façon dont je règle la largeur sur auto ou quelque chose mais je ne peux pas le trouver.

Aussi, je suis IE7 (restriction de l'entreprise)

Answer 1

Je ne comprends pas pourquoi, mais ce code a fonctionné pour moi:

<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;"> 

Answer 2

Il est difficile de comprendre ce que vous obtenez et ce que vous essayez d'obtenir. quelques captures d'écran aideraient grandement. Pendant ce temps:

Ce modal est dans un gridview

Je ne mettrais pas un modalpopupextender dans un gridview.

Le problème, le contenu du popup est répété pour chaque ligne dans votre gridview, qui génèrent beaucoup de code pour gérer tous ces popup. Notez également que tout le html et les images à l'intérieur du panneau sont chargés dans la page, même s'ils ne sont pas affichés.

Je vous suggère de mettre votre prolongateur à l'extérieur du gridview. Pour gérer cela, vous avez beaucoup de modifications à faire. Dans sumarry, vous mettez le gridview comme asyncpostbacktrigger de votre panneau de mise à jour pnlImage. Définissez le TargetControlID to a hidden button so you could show your ModalPopupExtender from Code behind. remplacez votre lbName par un lien link et définissez comme commande dans l'événement gGridView_RowCommand et utilisez e.CommandName et e.CommandArgument pour lier manuellement les contrôles dans le popup modal dans le code derrière, vous pouvez utiliser un répéteur ou un datalist qui se lie à une source de données qui retourne uniquement un article si vous ne voulez pas gérer toutes les choses manuellement. De cette façon, votre code sera beaucoup plus efficace et vous pourrez utiliser l'option que vous avez exclue.