Question

Problème d'affichage - Popo-in Widget

Forum|Forum|1 month ago
November 19, 2025
2 replies
0 views

baptiste.ths
Seeker

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

B

baptiste.ths
Author
Seeker
Forum|Forum|1 month ago
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>


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


</div>
</div>

</div>

</ods-dataset-context>

Baptiste Thomas - Ville de Mons

Like

B

baptiste.ths
Author
Seeker
Forum|Forum|1 month ago
November 19, 2025

/* ods-pagination */
.odswidget-pagination {
margin: 20px auto;
}

/* Contact Card (Basic card)
========================================================================== */

.box,.row.full-height{height:100%}.row{display:flex;flex-wrap:wrap}.row>*{margin-bottom:20px}.order-0{order:0}@media screen and (min-width:750px){.order-sm-0{order:0}}@media screen and (min-width:970px){.order-md-0{order:0}}@media screen and (min-width:1170px){.order-lg-0{order:0}.order-lg-1{order:1}}.order-1{order:1}@media screen and (min-width:750px){.order-sm-1{order:1}}@media screen and (min-width:970px){.order-md-1{order:1}.order-md-2{order:2}}.order-2{order:2}@media screen and (min-width:750px){.order-sm-2{order:2}}@media screen and (min-width:1170px){.order-lg-2{order:2}.order-lg-3{order:3}}.order-3{order:3}@media screen and (min-width:750px){.order-sm-3{order:3}}@media screen and (min-width:970px){.order-md-3{order:3}.order-md-4{order:4}}.order-4{order:4}@media screen and (min-width:750px){.order-sm-4{order:4}}@media screen and (min-width:1170px){.order-lg-4{order:4}.order-lg-5{order:5}}.order-5{order:5}@media screen and (min-width:750px){.order-sm-5{order:5}}@media screen and (min-width:970px){.order-md-5{order:5}.order-md-6{order:6}}.order-6{order:6}@media screen and (min-width:750px){.order-sm-6{order:6}}@media screen and (min-width:1170px){.order-lg-6{order:6}.order-lg-7{order:7}}.order-7{order:7}@media screen and (min-width:750px){.order-sm-7{order:7}}@media screen and (min-width:970px){.order-md-7{order:7}.order-md-8{order:8}}.order-8{order:8}@media screen and (min-width:750px){.order-sm-8{order:8}}@media screen and (min-width:1170px){.order-lg-8{order:8}.order-lg-9{order:9}}.order-9{order:9}@media screen and (min-width:750px){.order-sm-9{order:9}}@media screen and (min-width:970px){.order-md-9{order:9}.order-md-10{order:10}}.order-10{order:10}@media screen and (min-width:750px){.order-sm-10{order:10}}@media screen and (min-width:1170px){.order-lg-10{order:10}.order-lg-11{order:11}}.order-11{order:11}@media screen and (min-width:750px){.order-sm-11{order:11}}@media screen and (min-width:970px){.order-md-11{order:11}.order-md-12{order:12}}.order-12{order:12}@media screen and (min-width:750px){.order-sm-12{order:12}}@media screen and (min-width:1170px){.order-lg-12{order:12}}@media screen and (max-width:1169px){:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-1,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-10,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-11,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-12,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-2,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-3,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-4,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-5,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-6,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-7,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-8,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-9{width:100%}}@media screen and (max-width:969px){:not([class*=col-sm]):not([class*=col-xs]).col-md-1,:not([class*=col-sm]):not([class*=col-xs]).col-md-10,:not([class*=col-sm]):not([class*=col-xs]).col-md-11,:not([class*=col-sm]):not([class*=col-xs]).col-md-12,:not([class*=col-sm]):not([class*=col-xs]).col-md-2,:not([class*=col-sm]):not([class*=col-xs]).col-md-3,:not([class*=col-sm]):not([class*=col-xs]).col-md-4,:not([class*=col-sm]):not([class*=col-xs]).col-md-5,:not([class*=col-sm]):not([class*=col-xs]).col-md-6,:not([class*=col-sm]):not([class*=col-xs]).col-md-7,:not([class*=col-sm]):not([class*=col-xs]).col-md-8,:not([class*=col-sm]):not([class*=col-xs]).col-md-9{width:100%}}@media screen and (max-width:749px){.row{flex-direction:column}:not([class*=col-xs]).col-sm-1,:not([class*=col-xs]).col-sm-10,:not([class*=col-xs]).col-sm-11,:not([class*=col-xs]).col-sm-12,:not([class*=col-xs]).col-sm-2,:not([class*=col-xs]).col-sm-3,:not([class*=col-xs]).col-sm-4,:not([class*=col-xs]).col-sm-5,:not([class*=col-xs]).col-sm-6,:not([class*=col-xs]).col-sm-7,:not([class*=col-xs]).col-sm-8,:not([class*=col-xs]).col-sm-9{width:100%}}.no-margin-bottom,.no-mb{margin-bottom:0!important}.no-margin-x,.no-mx{margin-left:0!important;margin-right:0!important}

.contact-card {

background-color: white;
height:100% ;
padding: 13px;
border: 1px solid var(--boxes-border);
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.16);
border-radius: var(--boxes-radius);
transition: all .2s;
position: relative;
}

.contact-card:hover {
border-color: var(--highlight);
}
.contact-card-header {
position: relative;
height: 140px;
width: 140px;
background-color: rgba(218, 218, 218, .2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.contact-card-photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 140px;
width: auto;
max-width: 140px;
border-radius: 50%;
}
.contact-card-tag {
font-size: .9rem;
padding: 4px;
text-transform: uppercase;
font-weight: normal;
border-radius: 4px;
position: absolute;
bottom: -10px;
color: #4f9e30;
background-color: #d2e6cc;
}
.contact-card-title {
font-size: 1.5rem;
color: var(--titles);
font-weight: normal;
margin-top: 13px;
margin-bottom: 6px;
max-width: 100%;
}
.contact-card-post {
color: #6f6f6f;
font-size: 1em;
line-height: 1.5;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
}
.contact-card-description {
font-size: 1rem;
line-height: 1.5;
font-weight: normal;
padding-top: 13px;
margin-top: 26px;
margin-bottom: 0;
border-top: 1px solid #dadada;
color: var(--text);
max-width: 100%;
}
.color-card-pop-in-button {
position: absolute;
top: 13px;
right: 13px;
color: #071a70;
border-radius: 4px;
border: 1px solid #071a70;
padding: 4px 8px;
font-size: .9rem;
text-decoration: none;
transition: all .2s;
}
.color-card-pop-in-button:hover {
background-color: #071a70;
color: #FFFFFF;
text-decoration: none;
}
/* Pop-in
========================================================================== */
.ods-pop-in__backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
z-index: 101;
cursor: auto;
}
.pop-in-clear-button {
font-size: 1.3em;
color: #ababab;
position: absolute;
top: 15px;
right: 15px;
border: none;
background: none;
z-index: 1;
}
.pop-in-clear-button:hover {
color: #09357a;
}
.pop-in-card {
z-index: 102;
height: auto;
min-width: 300px;
width: 700px;
background-color: white; /* Background color of card */
color: var(--text);
padding: 26px;
margin: 0 10px;
border-radius: 4px;
text-decoration: none;
transition: all .2s;
position: relative;
display: flex;
flex-direction: column;
}
.pop-in-header {
margin-bottom: 20px;
}
.pop-in-photo-container {
position: relative;
height: 100px;
width: 100px;
background-color: rgba(218, 218, 218, .2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
.pop-in-photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 100px;
width: auto;
max-width: 100px;
border-radius: 50%;
}
.pop-in-title {
font-size: 1.5rem;
color: #071a70;
font-weight: normal;
margin-top: 17px !important;
margin-bottom: 10px;
}
.pop-in-subtitle {
font-size: 1rem;
margin: 4px 0;
text-transform: uppercase;
font-weight: normal;
border-radius: 4px;
margin: 0;
display: inline-block;
}
.pop-in-list {
margin-top: 0;
margin-bottom: 0;
}
.pop-in-list dt {
color: #6f6f6f;
}
@media screen and (min-width: 767px) {
.pop-in-list dt {
text-align: right;
}
}
.pop-in-list dd {
margin: 0;
}

.ods-pop-in__container {
z-index: 102;
}

.ods-pop-in__backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
z-index: 101;
cursor: auto;
}

.iframe-container {
width: 100%;
padding: 10px;
max-width: inherit;
margin-left: 120px;
margin-right: 120px;
}

.iframe-container iframe {
border: none;
}

/* Search Module
========================================================================== */
.search-module {
display: flex;
align-items: stretch;
border-bottom: 1px solid #dee5ef;
margin-bottom: 20px;
transition: all .2s
}
.search-module:hover,
.search-module:focus-within {
border-bottom-color: var(--links);
}
.search-module-icon {
color: #898d92;
margin-right: 8px;
align-self: center;
}
.search-module-input {
background-color: transparent;
width: 100%;
outline: none;
border: none;
padding: 12px 0;
transition: all .2s;
color: var(--text);
}
.search-module-input::placeholder {
transition: all .2s;
}
.search-module-clear {
color: #898d92;
font-size: 1rem;
background: transparent;
border: none;
margin: 0;
outline: none;
padding: 0 0 0 12px;
transition: all .2s;
}
.search-module-clear:hover {
opacity: .65;
}
.search-module:hover .search-module-icon,
.search-module:focus-within .search-module-icon,
.search-module:hover .search-module-input::placeholder,
.search-module:focus-within .search-module-input::placeholder {
color: var(--links)
}

/* Filters
========================================================================== */

.filter-list {
display: flex;
flex-wrap: wrap;
position: relative;
left: 130px
}

.filter-list>* {
margin: 0 0 10px;
width: 100%;
}

.odswidget-select .odswidget-select-dropdown.open .odswidget-select-dropdown-menu {
width: 100%
}

.clear-filters {
display: flex;
align-items: center;
justify-content: center;
}

.clear-filters-button:hover {
opacity: 0.65;
}

.odswidget-select,
.odswidget-select .odswidget-select-dropdown {
width: 100%;
}

@media screen and (min-width: 500px) {
.filter-list>* {
margin: 0 10px 10px 0;
width: inherit;
}
.odswidget-select .odswidget-select-dropdown.open .odswidget-select-dropdown-menu {
width: max-content;
min-width: 240px;
}
}

Baptiste Thomas - Ville de Mons

Like

1 Attachments

Sign up

Already have a Huwise account ?

Login to the community

Already have a Huwise account ?

Scanning file for viruses.

This file cannot be downloaded