none
combobox ajax et le modalpopupextender RRS feed

  • Discussion générale

  • bonjour à tous,

    j'essaye depuis un moment d’intégrer un combobox ajax dans un panel contrôlé par un modalpopup extender.

    à l'execution le bouton du combo ne s'affiche pas ...

    je cherche à savoir comment faire pour le réafficher.

    merci d'avance pour votre aide

    • Type modifié Aurel Bera lundi 16 septembre 2013 07:31 Discussion
    mardi 10 septembre 2013 09:15

Toutes les réponses

  • Bonjour Scania113

    J'ai fait un petit teste avec le ModalPopUpExtender et ComboBox avec le même résultat que vous (si j’ai bien compris votre problème).  

    En effet le problème c’est que le comboBox ne s’affiche pas bien et on doit forcer la classe CSS pour l’afficher bien :

    Donc ajoutez le CSS suivant :

    <style > .comboBoxInsideModalPopup {position:relative;}

    .comboBoxInsideModalPopup ul {

        position:absolute ! important;

        left:2px ! important;

        top:22px ! important;}

    </style>

    et le code :

    <body>
        <form id="form1" runat="server">
                           <asp:Panel ID="Panel1" runat="server">
                               <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" CssClass="comboBoxInsideModalPopup">
                                    <asp:ListItem Text="Val  1" Value ="1"> </asp:ListItem>
                                     <asp:ListItem Text="Val 2" Value ="2"> </asp:ListItem>
                                     <asp:ListItem Text="Val 3" Value ="3"> </asp:ListItem>
                                     <asp:ListItem Text="Val 4" Value ="4"> </asp:ListItem>
                                     <asp:ListItem Text="Val 5" Value ="5"> </asp:ListItem>
                                     <asp:ListItem Text="Val 6" Value ="6"> </asp:ListItem>
                           </ajaxToolkit:ComboBox>
                Blah Blah Blah </asp:Panel>
             <ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1"/>              
             <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID ="Button1">
          </ajaxToolkit:ModalPopupExtender>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        <div>    
        </div>
        </form>
    </body>

    Ça fonctionne bien maintenant pour moi.

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.


    • Modifié Aurel Bera mardi 10 septembre 2013 11:45 MODIF CSS
    mardi 10 septembre 2013 11:07
  • Merci Aurel pour votre réponse. j'ai testé la solution que vous m'avez donné , et j'ai toujours le meme problème. en fait mes combo sont déja lié à une classe css de la manière suivante :

    le code combo :

    <div class="styled-select-ajax" runat="server" id="div_ville">
    
    <asp:ComboBox class="comboajax" ID="Cmb_ville" runat="server" MaxLength="0" AutoPostBack="True" oniteminserted="Cmb_ville_ItemInserted" onselectedindexchanged="Cmb_ville_SelectedIndexChanged" AutoCompleteMode="Suggest" DropDownStyle="Simple" ></asp:ComboBox>
    
    </div>


    voici le code CSS :

     .styled-select-ajax 
    {
        
       width: 180px;
       height: 27px;
       border: 1px solid #ccc;
       
       }
    
    .styled-select-ajax .ajax__combobox_buttoncontainer button
       {
         ; 
         background: url(../Image/arrow_triangle_p.png) no-repeat right #FFF;
          
       }
    
     .comboajax
       {
        margin-bottom:5px;   
       }
    
     .comboajax ul {
        } 
    
     .comboajax .ajax__combobox_textboxcontainer input
    {
       
         border:none;
        border-right: 0px none;
        padding: 1px 0px 0px 5px;
        font-size: 13px;
        height: 21px;
        width:151px;
     
    }
    
    .comboajax .ajax__combobox_buttoncontainer button
    {
        
        border:none;
        background-image: url(../Image/arrow_triangle_p.png);
    }
    
    .comboajax.ajax__combobox_itemlist
    {
        margin: 0px;
        padding: 0px;
        cursor: default;
        list-style-type: none;
        text-align: left;
        border: solid 1px ButtonShadow;
        background-color: Window;
    }
    .comboajax .ajax__combobox_itemlist li
    {
        white-space: nowrap;
        padding: 0 3px 0 2px;
    }


    • Modifié scania113 mardi 10 septembre 2013 11:45
    mardi 10 septembre 2013 11:39
  • J'ai modifié la classe css dans mon poste initial - à cause de copier-coller on a perdu quelques informations.

    Pour l’adapter aux vos besoins  je fais les changements :

    .comboajax  ul {

        position:absolute ! important;

        left:2px ! important;

        top:22px ! important;

    }

    Si ça ne fonctionne pas, pouvez-vous nous créer un petit projet de test et le partager avec nous sur Skydrive.com?

    Merci,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    mardi 10 septembre 2013 11:51
  • non ça ne marche toujours pas ...

    je suis entrain de préparer le mini-projet pour le mettre sur skydrive

    mardi 10 septembre 2013 14:24
  • Bonjour,

    Jetez un cou d'oeil sur ce thread.

    http://forums.asp.net/t/1426949.aspx

    Cdt,


    Sami CHNITER Software Engineer

    mardi 10 septembre 2013 17:09
  • bonjour à tous,

    j'ai essayé toutes les solutions que vous me proposer mais sans résultat positif.

    j'ai essayé aussi de créer un mini-projet a fin de le partager avec vous, mais je n'ai pas pu faire marcher le modalpopupextender ....

    cordialement,

    mercredi 11 septembre 2013 08:42
  • Pouvez-vous verifier si il y a une erreur JavaScript dans votre projet initial?

    Avec Intnet Explorer decrochez les options "Désactiver le débogage des scripts(Internet Explorer)"dans le menu Outils/Avancé.

    Comme ca vous pouvez voir les erreurs de JavaScript (avec Internet Explorer), et ca peut nous apporter des détails.

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    mercredi 11 septembre 2013 08:54
  • bonjour aurel,

    je viens de faire ce que vous venez de me demander, et après exécution il n'y'a eu d'erreur javascript

    mercredi 11 septembre 2013 09:24
  • J'ai modifié les classes CSS comme ça :

    .comboajax{
    margin-bottom:5px;

    }
    et
    .comboajax ul {



    }

    et il affiche bien.

    Assurez-vous que vous n'ajoutez plusieur fois les memes classes car je le vois dans votre code comme ca:

    .comboajax
      
    {
        margin
    -bottom:5px;  
      
    }

    .comboajax ul {
       
    }

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    mercredi 11 septembre 2013 09:59
  • est ce qu'il vous affiche le bouton du combo aussi ??

    car pour le problème ce n'est pas le combo, mais c'est surtout son bouton, qui pour moi est une image.

    mercredi 11 septembre 2013 10:14
  • Avez-vous mis l'image avec le petit triangle dans le bon endroit?

    C'est spécifié: ../Image/arrow_triangle_p.png


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    mercredi 11 septembre 2013 10:38
  • OUI, d'ailleurs ça s'affiche bien quand c'est en dehors du modalpopup extender
    mercredi 11 septembre 2013 13:37
  •  

    Je n'arrive pas à reproduire votre problem. Je soupçonne qu’il y a quelque chose qui casse les styles et n’affiche bien l’image.

    Essayez d’utiliser les outils de développement d’IE ou Chrome pour vérifier les classes CSS et comment ils sont appliqués. Le combobox d’Ajax est composée par des listes, images et TextBox. Vous allez les voir dans le HTML génère et vérifiez la si les classes s’applique bien.

    Cordialement.


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.


    • Modifié Aurel Bera mercredi 11 septembre 2013 13:50
    mercredi 11 septembre 2013 13:49
  • Bonjour

    Avez-vous des nouvelles pour nous?

    Merci!

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    vendredi 13 septembre 2013 11:53