Skip to main content
Question

Problème d'affichage - Pop-in Widget

  • November 19, 2025
  • 1 reply
  • 8 views

Bonjour à tous,

J’essaie de construire un annuaire de contact sur base de la fonctionnalité “Contact card + popin widget” disponible dans la libraire Huwise avec le lien suivant: https://codelibrary.opendatasoft.com/components/contact-card/#contact-card--popin-widget

Pour l’instant, j’ai réussi à obtenir le visuel suivant grâce à la balise ng-repeat. 

 

J’aimerai maintenant faire apparaître un pop-in pour chaque carte de contact en cliquant sur le bouton “plus d’infos” mais le pop-in ne s’affiche pas correctement. Exemple ici, j’ai cliqué sur la première carte mais le pop-in ne s’affiche qu’en dessous des cartes suivantes. Si je clique sur la cinquième carte, idem le pop-in va s’afficher en dessous des cartes suivantes (7e , 8e ,9e ...) 

Dois-je modifier une classe dans l’HTML ou bien un paramètre dans le CSS ?

Vous trouverez mon code complet en pièce jointe.

Merci d’avance pour votre aide, 

 

Bien à toi,

Baptiste

 

1 reply

  • Author
  • Seeker
  • November 19, 2025

<ods-dataset-context context="association"
                     association-dataset="listing-associations"
                     association-domain="opendata.mons.be">
    <div class="search-module">
        <i class="fa fa-search search-module-icon" aria-hidden="true"></i>
        <input placeholder="Rechercher une association"
               ng-model="association.parameters['q']"
               ng-model-options="{ updateOn: 'keyup', debounce: 300 }"
               class="search-module-input"
               type="text"/>
        <button class="search-module-clear"
                ng-if="association.parameters['q']"
                ng-click="association.parameters['q'] = undefined">
            <i class="fa fa-times-circle" aria-hidden="true"></i>
        </button>
    </div>
    
      <!-- FILTERS Search & Select -->
            <div class="filter-list" ng-init="dropdown.open = ''">
                <div ods-facet-results="nomassociation" ods-facet-results-facet-name="nom_de_l_association"
                    ods-facet-results-context="association" ods-facet-results-sort="alphanum">
                    <ods-select ng-if="nomassociation"
                        selected-values="association.parameters['refine.nom_de_l_association']" multiple="false"
                        options="nomassociation" label-modifier="name" value-modifier="name"
                        placeholder="Sélectionnez une association"></ods-select>
                </div>
                <div ods-facet-results="secteuractivite" ods-facet-results-facet-name="secteurs_d_activite"
                    ods-facet-results-context="association" ods-facet-results-sort="alphanum">
                    <ods-select ng-if="secteuractivite" selected-values="association.parameters['refine.secteurs_d_activite']"
                        multiple="true" options="secteuractivite" label-modifier="name" value-modifier="name"
                        placeholder="Sélectionnez un secteur d'activité"></ods-select>
                </div>
                <div ods-facet-results="formejuridique" ods-facet-results-facet-name="forme_juridique"
                    ods-facet-results-context="association" ods-facet-results-sort="alphanum">
                    <ods-select ng-if="formejuridique" selected-values="association.parameters['refine.forme_juridique']"
                        multiple="true" options="formejuridique" label-modifier="name" value-modifier="name"
                        placeholder="Sélectionnez un type d'association"></ods-select>
                </div>
                <div ods-facet-results="lieuxactivites" ods-facet-results-facet-name="lieu_x_de_s_activite_s"
                    ods-facet-results-context="association" ods-facet-results-sort="alphanum">
                    <ods-select ng-if="lieuxactivites" selected-values="association.parameters['refine.lieu_x_de_s_activite_s']"
                        multiple="true" options="lieuxactivites" label-modifier="name" value-modifier="name"
                        placeholder="Sélectionnez un lieu d'activité"></ods-select>
                </div>

                <div class="clear-filters"
                    ng-show="association.parameters['refine.secteurs_d_activite'].length >0 |
                             |  association.parameters['refine.nom_de_l_association'].length >0 |
                             | association.parameters['refine.forme_juridique'].length>0 |
                             | association.parameters['refine.lieu_x_de_s_activite_s'].length >0">
                    <div class="clear-filters-button" role="button" 
          ng-click="association.parameters['refine.nom_de_l_association'] = undefined;
                    association.parameters['refine.secteurs_d_activite'] = undefined;
                    association.parameters['refine.forme_juridique'] = undefined;
                    association.parameters['refine.lieu_x_de_s_activite_s'] = undefined">
                        Supprimer tous les filtres
                        <i class="fa fa-times-circle" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
    
    
    <div class="container">
   
        <div class="row"
             ods-results="records"
             ods-results-context="association"
             ods-results-max="12">
            
            <div class="col-md-4 col-sm-6"
                 ng-repeat="record in records">
                
                <div class="contact-card">
                    <a ng-click="record.pop = true;"
                       class="color-card-pop-in-button">
                        Plus d'infos
                    </a>

                    <h3>{{ record.fields.nom_de_l_association }}</h3>

                    <h4 class="contact-card-description">
                        {{ record.fields.nom_responsable}}
                        <br>
                        {{ record.fields.mail}}
                        <br>
                        {{ record.fields.telephone}}
                    </h4>
                    
                    
                     </div>
                

               


          <!-- Pop-in -->
            <pop-in class="ods-pop-in"
                    ng-if="record.pop">
               
                <div class="pop-in-card">
                    <button class="pop-in-clear-button"
                            ng-click="record.pop = close"
                            aria-label="Close popup window">
                        
                    </button>
                   
                    <div class="pop-in-header row">
                        <div class="col-xs-4">
                            Association
                        </div>
                        <div class="col-xs-8">
                            <h2 class="pop-in-title">
                                {{ record.fields.nom_de_l_association}}
                            </h2>
                            <h3 class="pop-in-subtitle">
                               {{ record.fields.nom_responsable}}
                            </h3>
                        </div>
                    </div>
                    
                    <dl class="row pop-in-list">
                        <dt class="col-sm-4">Description</dt>
                        <dd class="col-sm-8">{{ record.fields.descriptif_des_activites_objet_de_l_association}}</dd>
                        <dt class="col-sm-4">Autres liens</dt>
                        <dd class="col-sm-8">{{ record.fields.site_internet_reseaux_sociaux_facebook_instagram}}</dd>
                        <dt class="col-sm-4">Telephone</dt>
                        <dd class="col-sm-8">{{ record.fields.telephone}}</dd>
                        <dt class="col-sm-4">E-mail</dt>
                        <dd class="col-sm-8">{{ record.fields.mail}}</dd>
                    </dl>
                    
                </div>
                <div class="ods-pop-in__backdrop" ng-click="record.pop = close"></div>
            </pop-in>
            <!-- End of Pop-in -->
        
                </div>
            </div>

       
        
        <div class="row">
            <ods-pagination-block context="association"
                                  per-page="12">
            </ods-pagination-block>
        </div>

    
</div>


</ods-dataset-context>