diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js
index b6b3291d..9309f1e3 100644
--- a/src/CategoryOverpass.js
+++ b/src/CategoryOverpass.js
@@ -32,11 +32,12 @@ var defaultValues = {
},
layouts: {
popup:
- '
' +
'' +
@@ -544,10 +545,11 @@ CategoryOverpass.prototype.notifyPopupClose = function (object, popup) {
CategoryOverpass.prototype.updatePopupContent = function (object, popup) {
if (this.popupBodyTemplate) {
- var popupBody = popup._contentNode.getElementsByClassName('popupBody')
- if (!popupBody.length) {
+ var popupBody = popup._contentNode.querySelector('#popupBody')
+ if (!popupBody) {
popupBody = document.createElement('div')
popupBody.className = 'popupBody'
+ popupBody.id = 'popupBody'
popup._contentNode.appendChild(popupBody)
}
diff --git a/style.css b/style.css
index a7487b4f..fcc06956 100644
--- a/style.css
+++ b/style.css
@@ -295,6 +295,32 @@ a:active {
color: red;
}
+.leaflet-popup-content-wrapper {
+ padding: 0;
+}
+.leaflet-popup-content {
+ margin: 0;
+ overflow: auto;
+}
+.leaflet-popup-content > .header {
+ background: #dfdfdf;
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ border-bottom: 1px solid #afafaf;
+ padding: 0.5em 0.5em 0.25em 0.5em;
+ margin-bottom: 0.5em;
+}
+.leaflet-popup-content > .header::after {
+ content: '';
+ clear: both;
+ display: table;
+}
+.leaflet-popup-content > .popupBody {
+ padding: 0 0.5em;
+}
+.leaflet-popup-content > .popup-footer {
+ padding: 0.5em 0.5em 0.25em 0.5em;
+}
.leaflet-popup-content .description {
display: block;
font-style: italic;