Discussion :

[noitsnotme]

Les 2 pages ci-dessous mettent en œuvre divers contrôles de l'extension Geoportal Leaflet dont L.geoportalControl.ElevationPath({})

Sur la page ci-dessous: le contrôle marche correctement :
http://www.aphyllanthe.fr/randonnees....php?rkey=1341

Sur celle-ci : le contrôle semble marcher mais l'affichage du profil altimétrique n'est pas correctement formatée (débordant le cadre prévu et empilé vers le bas.
http://www.aphyllanthe.fr/randonnees/loadtrack.php

Entre ces deux pages - peu de différences. La première est identique à la 2e sauf qu'elle affiche en overlay le tracé d'un GPX extrait d'une base de données.

J'ai l'impression que cela peut venir du CSS mais n'ai rein trouvé.

Quelqu'un aurait une idée ?

[lboulanger]

Bonsoir,

Dans le cas de la page http://www.aphyllanthe.fr/randonnees/loadtrack.php (celle où le profil alti s'affiche mal), votre div id="mapdiv" (celle qui contient votre carte et aussi le contrôle de profil alti) est dans une div id="content", alors que ce n'est pas le cas de l'autre page.

Et les styles CSS associés à la div "content" surchargent ceux de l'extension Géoportail, c'est pour ça que le contrôle s'affiche mal.

En particulier, ces deux blocs d'instructions posent problèmes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#content ul, ol {
	margin:10px 10px 10px 25px;
	border-top:1px solid #eee;
}
#content li {
	padding:10px;
	border-bottom:1px solid #eee;
}

car le profil affiché est constitué d'une listes ul et li, et ces instructions concernent toutes les balises ul et li insérées dans votre div content.

Si vous souhaitez conserver cette configuration et vos styles pour des divs de type ul ou li, vous pouvez par exemple leur attribuer une classe spécifique, et définir les styles pour cette classe en particulier

par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.votreClasseul {
	margin:10px 10px 10px 25px;
	border-top:1px solid #eee;
}
.votreClasseli {
	padding:10px;
	border-bottom:1px solid #eee;
}

[noitsnotme]

Merci pour la réponse et surtout votre perspicacité. Dans la page qui marchait déjà correctement, le div "content" était fermé juste avant de déclarer le mapdiv (et c'était une erreur de HTML car le div "content" devait être fermé à la fin du script seulement). En appliquant vos observations, le profil alti marchent correctement maintenant dans les 2 pages.