1479 sujets

Web Mobile et responsive web design

[Résolu] Flexbox et min-height d'une carte Openlayers

Bonjour,

J'ai le code suivant :

<body>
    <header> <img src="image/logo.png" />
    </header>
    <main>
      <aside>
        <div id="presentServeur">
          <p>emplacement d'un paragraphe</p>
          <p>emplacement d'une liste</p>
        </div>
        <div id="presentCarte">
          <p>emplacement d'un tableau</p>
        </div>
      </aside>
      <section>
        <div id="map"></div>
      </section>
    </main>
  </body>


main {  display: flex;  flex-flow: row nowrap; }

main aside { flex: 1 1 30%; }

main section { flex: 1 1 70%; display: flex; }

#map { flex: 1; }

/* Responsive */

@media all and (max-width: 640px) {
  main { flex-flow: column nowrap; }
  main section { min-height: 400px; }
}


A l'initialisation de ma page, tout va bien. L'élément aside est ajusté à son contenu et la section (qui contient une carte OpenLayers 4) fait la même hauteur. En largeur, aside occupe bien 30% de l'espace et la section 70%, tel que je le souhaite.
Lorsque je réduis le navigateur à une largeur de 640px, tout va bien aussi. La section se place sous l'aside et elle fait bien 400px de hauteur minimum.
En revanche, quand je remets le navigateur en plein écran, la section est plus haute qu'à l'initialisation. Alors que je m'attends à retrouver une carte pas plus haute que l'aside (comme à l'initialisation).

J'évoque min-height dans le titre de ce post car lorsque je supprime cette mention dans ma media query, le problème n'existe pas.
[EDIT] : vérification faite, ce que j'affirme dans le précédent paragraphe est inexact.

Note : le problème n'existe pas non plus, et cela même quand min-height est dans la media query, si je remplace le contenu de la div "map" par des paragraphes.

J'ai pensé qu'une solution pouvait se trouver dans ce billet https://www.alsacreations.com/astuce/lire/1701-images-responsive-flexbox-bug-ratio.html mais je n'ai pas su le mettre en oeuvre.

Pourriez-vous m'aider à comprendre et remédier au problème ?

Merci.
Modifié par geOliv (07 Nov 2017 - 19:10)
Modérateur
Après il y a des raté entre flex et min-height mais surtout sous IE 10-11
a écrit :
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

a écrit :
IE 11 does not vertically align items correctly when min-height is used

etc
-> http://caniuse.com/#feat=flexbox
Désolé _laurent je viens de compléter mon message initial en précisant que je ne constate pas d'erreur lorsque je remplace ma carte OpenLayers par du texte, comme votre fiddle.

D'autre part, j'utilise Firefox 56.
Modérateur
Salut,

Bah du coup c'est un soucis entre le min-height et la map. La map fait 100% de la hauteur du bloc mais le bloc n'a pas de hauteur par défaut, il a juste un min à 200px. Du coup selon la taille de l'écran la carte grandi (ça c'est un comportement spécifique à la map je pense, un calcul à la volée de la hauteur) et pousse son parent qui grandi aussi et c'est un cercle vicieux.

Apres une réduction on arrive a un :
<canvas class="ol-unselectable" style="width: 100%; height: 100%; display: block;" width="582" height="1992"></canvas>


Il te manque juste une définition de hauteur ou hauteur max pour la map je pense que ca règlera le soucis... j'ai pas mieux Smiley ohwell
Salut,

Un max-height sur la map limite effectivement le défaut... Mais j'ai très peu de chance que ma map ait la même hauteur que mon texte. Même à l'initialisation de la page (selon le media).

Je reste à la recherche d'une solution. Est-ce qu'il faut éviter les Flexbox ?

Merci en tous cas pour ta réponse _laurent. Smiley smile
Modérateur
Non je ne pense pas qu'il faille éviter le flexbox c'est juste que dans un bloc de texte c'est le texte qui détermine la hauteur mais avec la map c'est flou et indéfini. Il faut juste fixer la hauteur pour moi... ou alors (je viens juste d'y penser) positionner la map en absolue dans le bloc en flex :

main section {
  position: relative; /* important pour pouvoir placer le absolute */
  /* pas de display: flex ici */
  flex: 1 1 70%;
  flex-flow: row nowrap;
}

#map {
  position:absolute; /*placement en absolute */
  top:0;
  left:0;
  height:100%;
  width:100%;
}


De cette facon normalement la map prendra la taille du bloc mais le bloc ne sera pas influencé par la taille de la map vu qu'elle est hors du flux...

Tu me diras si ca répond a tes attentes...
Modifié par _laurent (08 Nov 2017 - 14:32)
Meilleure solution
Ouahhh ! En terme de comportement ça fixe le problème. Merci _laurent.

Pour la décoration, ça semble m'empêcher d'appliquer (correctement) un padding à la section pour offrir à ma carte un petit cadre aux coins arrondis. Voir Codepen https://codepen.io/anon/pen/OObZVX

En même temps, à l'heure du flat design, ce cadre n'est probablement pas une bonne idée... Mais, pour ma gouverne, peux-tu me dire si le positionnement absolute empêche effectivement le padding ? (Sauf à appliquer le background-color à l'élément main et à donner une margin à la section, mais je ne trouve pas ça élégant).
Modifié par geOliv (08 Nov 2017 - 17:26)
Modérateur
Alors plutot que de mettre un padding (qui ne va rien faire bouger du tout tu as raison) tu peux positionner la map à X px du bord :

#map {
  position: absolute;
  top: 20px;
  left: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}


geOliv a écrit :
En même temps, à l'heure du flat design, ce cadre n'est probablement pas une bonne idée...
Question de gout Smiley langue
ça le fait ! Merci encore. Smiley biggrin

Juste pour revenir sur Flexbox et OpenLayers, j'ai pas mal parcouru les forums et cru pouvoir résoudre le problème avec la réponse fournie sur https://gis.stackexchange.com/questions/31409/openlayers-redrawing-map-after-container-resize/31415#31415.

ça n'a pas fonctionné pour moi, mais peut-être n'ai-je pas su la mettre en oeuvre. J'en fais donc mention ici pour ceux qui recherchent ...
Modifié par geOliv (07 Mar 2018 - 16:57)
Sujet clos
Aller à