Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°195

N° 195 - Utiliser des styles CSS pour gérer les dispositions dans vos fenêtres contextuelles


Depuis la mise à jour de décembre 2024, les fenêtres contextuelles des cartes web ArcGIS Online supportent l'utilisation de style CSS inline. Bien qu'il ne soit recommander lors de la création de pages ou de sites web, le CSS inline est utilisé pour donner un style à un élément HTML spécifique, son utilisation est bien adapté au contexte des éléments d'une fenêtre contextuel. Pour ces CSS inline, il vous suffit d’ajouter l’attribut de style à chaque balise HTML de votre fenêtre contextuelle, sans avoir à référencer de fichiers CSS externe ou des styles en utilisant des sélecteurs. 


Support de Flexbox et de Grid

Ce support de CSS inline va notamment vous permettre d'utiliser des conteneurs Flexbox ou Grid pour contrôler la disposition des éléments dans vos fenêtres contextuelles. La principale différence entre Flexbox et Grid réside dans leur conception et leur utilisation. Flexbox est conçu pour la mise en page unidimensionnelle (ligne ou colonne). Grid est conçu pour la mise en page bidimensionnelle (ligne et colonne).


Avec Flexbox, les éléments "enfants" sont alignés uniquement sur une ligne horizontale ou une colonne verticale.

Avec Grid, vous pouvez créer une grille complète et placer des éléments "enfants" à des intersections précises.


Propriétés CSS supportées

La liste suivante décrit les propriétés CSS supportées par ArcGIS Online pour contrôler l'apparence de vos mises en page Flexbox et Grid :

  • Align-items
  • Align-self
  • Gap
  • Grid
  • Grid-area
  • Grid-auto-columns
  • Grid-auto-flow
  • Grid-auto-rows
  • Grid-column
  • Grid-column-end
  • Grid-column-start
  • Grid-row
  • Grid-row-end
  • Grid-row-start
  • Grid-template
  • Grid-template-areas
  • Grid-template-columns
  • Grid-template-rows
  • Justify-content
  • Justify-items
  • Justify-self
  • Margin
  • Padding

Dans la suite de cet article, je vous propose quelques exemple génériques pour des styles Flexbox ou Grid.


Exemples de fenêtres contextuelles utilisant les boîtes flexibles (Flexbox)

Dans ce premier exemple, nous divisions verticalement la fenêtre contextuelle en trois zones de hauteur identique (30% de la hauteur totale) pour trois catégories d'information différentes : Information 1, Information 2 et Information 3. Un affichage en boîtes flexibles (display: flex) en "row" permet d'empiler les trois blocs :
<div style="align-items:flex-end;display:flex;flex-wrap:wrap;gap:5px;
            flex-direction:row;height:200px;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;width:100%;
                padding:10px;">
        Information 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;width:100%;
                padding:10px;">
        Information 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;width:100%;
                padding:10px;">
        Information 3
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Une variante sur les hauteurs (15%, 70% et 15%) permettra d'obtenir trois zones de type : En-tête, Information et Pied de page :
<div style="align-items:flex-end;display:flex;flex-direction:row;flex-wrap:wrap;
            gap:5px;height:200px;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:15%;width:100%;
                padding:10px;">
        En-tête
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:60%;width:100%;
                padding:10px;">
        Information
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:15%;width:100%;
                padding:10px;">
        Pied de page
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Dans ce second exemple, nous divisions horizontalement la fenêtre contextuelle en quatre zones : Infos Année 1, Infos Année 2 et Infos Année 3. Un affichage en boîtes flexibles (display: flex) en "column" permet de juxtaposer les trois blocs :
<div style="align-items:flex-start;display:flex;
            flex-direction:column;flex-wrap:wrap;gap:5px;height:220px;width:100%;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
                padding:10px;width:33%;">
        Infos Année 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
                padding:10px;width:33%;">
        Infos Année 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
                padding:10px;width:33%;">
        Infos Année 3
    </div>
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Dans ce troisième exemple, nous divisions la fenêtre contextuelle en trois lignes contenant deux éléments : Information et Image. Un affichage en boîtes flexibles (display: flex) en "row" permettra de superposer les trois lignes :
<div style="align-items:flex-end;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;
            height:200px;width:100%;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:65%;
                padding:10px;">
        Information 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:30%;
                padding:10px;">
        Image 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:65%;
                padding:10px;">
        Information 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:30%;
                padding:10px;">
        Image 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:65%
                padding:10px;">
        Information 3
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:30%;
                padding:10px;">
        Image 3
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :


On notera que dans ce dernier cas, une approche avec des boîtes flexibles (display: flex) en "column" permet également d'arriver au même résultat.
<div style="align-items:flex-end;display:flex;flex-direction:column;flex-wrap:wrap;
            gap:5px;height:220px;width:100%;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
                width:65%;">
        Information 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
                width:65%;">
        Information 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
                width:65%;">
        Information 3
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
                width:30%;">
        Image 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
                width:30%;">
        Image 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
                width:30%;">
        Image 3
    </div>
</div>

Dans ce dernier exemple, nous divisions verticalement et horizontalement la fenêtre contextuelle en quatre zones : Infos Année 1, Infos Année 2 puis pour la dernière colonne Prévision Année 3 et Prévision Année 4. Un affichage en boîtes flexibles (display: flex) en "column" permet de juxtaposer les quatre blocs :
<div style="align-items:flex-start;display:flex;
            flex-direction:column;flex-wrap:wrap;gap:5px;height:200px;width:100%;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
                padding:10px;width:33%;">
        Infos Année 1
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
                padding:10px;width:33%;">
        Infos Année 2
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:97px;
                padding:10px;width:33%;">
        Prévision Année 3
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;height:98px;
                padding:10px;width:33%;">
        Prévision Année 4
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Exemples de fenêtres contextuelles utilisant les grilles (Grid)

Avec le positionnement CSS par grille, vous allez disposer de plus de souplesse dans la création des éléments de votre fenêtre notamment en agissant simultanément sur les lignes et les colonnes en utilisant les propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.

Dans ce premier exemple,  la grille utilise la valeur "auto" pour définir les largeurs des colonnes. Il montre également comment définir les indices de début/fin des positions :
<div style="display:grid;gap:10px;grid-template-columns:auto auto auto;height:200px;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-end:3;
                grid-column-start:1;grid-row-start:1;padding:10px;">
        En-tête
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-start:3;
                grid-row-end:3;grid-row-start:1;padding:10px;">
        Liste
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-start:1;
                grid-row-start:2;padding:10px;">
        Image
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-start:2;
                grid-row-start:2;padding:10px;">
        Sources
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Le second exemple montre comment définir les indices de début/fin des positions à l'aide des propriétés grid-column et grid-row et des indices sténographiques :
<div style="display:grid;gap:10px;
            grid-template-columns:auto auto auto;height:200px;">
    <div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column:1/4;
                grid-row:1;padding:10px;">
        En-tête
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;
                grid-column:1/2;grid-row: 2 / span 2;padding:10px;">
        Menu
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;
                grid-column:2/3;grid-row:2;padding:10px;">
        Information
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;
                grid-column:3/4;grid-row:2;padding:10px;">
        Crédits
    </div>
    <div style="background-color:#e2f5d3;border:1px solid #ccc;
                grid-column:2/4;grid-row:3;padding:10px;">
        Pied de page
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Le dernier exemple reprend les propriétés des grilles vues précédemment pour montrer comment utiliser le positionnement par grille dans l'idée d'intégrer différents :
<div style="display:grid;gap:10px;grid-template-columns:auto auto auto;height:200px;">
    <div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:1/5;
                grid-row:1;padding:10px;">
        En-tête
    </div>
    <div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:1/2;
                grid-row:2;padding:10px;">
        Icone 1
    </div>
    <div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:2/3;
                grid-row:2;padding:10px;">
        Icone 2
    </div>
    <div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:3/4;
                grid-row:2;padding:10px;">
        Icone 3
    </div>
    <div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:4/5;
                grid-row:2;padding:10px;">
        Icone 4
    </div>
    <div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:1/5;
                grid-row:3;padding:10px;">
        Description
    </div>
</div>
La fenêtre contextuelle ressemblera à ceci :



Comment procéder dans ArcGIS Online ?

Comme vous le savez déjà, pour modifier la structure HTML d'une fenêtre contextuelle vous pouvez utiliser l'interface de configuration permettant de choisir les champs de la couche d'entités et les propriétés d'affichage associés. Dans cette interface, vous utiliserez le bouton "Source" pour éditer la source HTML de votre fenêtre contextuelle et définir les différentes parties <div> et leur positionnement à l'aide des propriétés CSS évoquées dans cet article.


Dans les prochains "Conseils & Astuces ArcGIS Online", je vous proposerais des exemples concrets de configurations avancées de fenêtres grâce au support des propriétés CSS de type Flexbox et Grid.


Bonne route sur ArcGIS Online !
   
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien.

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article: