From 85e4a625533425cf062abedccf56a4aa2f95bc76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Tue, 28 Jul 2020 20:21:12 +0200
Subject: [PATCH] Fix the popup in the geographic example

Set the container to prevent the popup from moving the element to the body.
Don't sanitze the html, as table is not in the list of allowed elements.
---
 examples/geographic.html | 4 +++-
 examples/geographic.js   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/examples/geographic.html b/examples/geographic.html
index 2418468a4f..77349d450d 100644
--- a/examples/geographic.html
+++ b/examples/geographic.html
@@ -13,6 +13,8 @@ resources:
   - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
   - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
-<div id="map" class="map"><div id="popup"></div></div>
+<div id="map" class="map">
+  <div id="popup"></div>
+</div>
 <div id="info"></div>
 
diff --git a/examples/geographic.js b/examples/geographic.js
index d44a81c39a..61ea219cd9 100644
--- a/examples/geographic.js
+++ b/examples/geographic.js
@@ -68,9 +68,11 @@ map.on('click', function (event) {
     const coordinate = feature.getGeometry().getCoordinates();
     popup.setPosition(coordinate);
     $(element).popover({
-      placement: 'top',
+      container: element.parentElement,
       html: true,
+      sanitize: false,
       content: formatCoordinate(coordinate),
+      placement: 'top',
     });
     $(element).popover('show');
   } else {