From 43da2c32a376a287e19b663691a4a010b3924a16 Mon Sep 17 00:00:00 2001 From: Rowan Winsemius Date: Mon, 29 Jun 2015 20:21:03 +1000 Subject: [PATCH 1/2] Add scroll handling for when the legend extends past the map height --- src/control/Control.Layers.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/control/Control.Layers.js b/src/control/Control.Layers.js index 5e6f7b73..430441d0 100644 --- a/src/control/Control.Layers.js +++ b/src/control/Control.Layers.js @@ -248,6 +248,16 @@ L.Control.Layers = L.Control.extend({ _expand: function () { L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded'); + var getLegendDiv = document.getElementsByClassName('leaflet-control-layers-list')[0]; + var legendHeight = getLegendDiv.clientHeight; + var getMap = document.getElementById('map'); + var controlHeight = getMap.clientHeight - 40; + if (controlHeight < legendHeight) + { + getLegendDiv.style.height = controlHeight + 'px'; + getLegendDiv.style.overflowY = 'scroll'; + getLegendDiv.style.paddingRight = '10px'; + } }, _collapse: function () { From 9bfb6d854e0d014efe73084de8afcc6b761082d0 Mon Sep 17 00:00:00 2001 From: Rowan Winsemius Date: Tue, 30 Jun 2015 21:59:20 +1000 Subject: [PATCH 2/2] Updated approach for resolving scrollbar issue in legend --- dist/leaflet.css | 4 ++++ src/control/Control.Layers.js | 12 ++++-------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/dist/leaflet.css b/dist/leaflet.css index c55a3728..008b9122 100644 --- a/dist/leaflet.css +++ b/dist/leaflet.css @@ -326,6 +326,10 @@ color: #333; background: #fff; } +.leaflet-control-layers-scrollbar { + overflow-y: scroll; + padding-right: 5px; + } .leaflet-control-layers-selector { margin-top: 2px; position: relative; diff --git a/src/control/Control.Layers.js b/src/control/Control.Layers.js index 430441d0..301c99bf 100644 --- a/src/control/Control.Layers.js +++ b/src/control/Control.Layers.js @@ -248,15 +248,11 @@ L.Control.Layers = L.Control.extend({ _expand: function () { L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded'); - var getLegendDiv = document.getElementsByClassName('leaflet-control-layers-list')[0]; - var legendHeight = getLegendDiv.clientHeight; - var getMap = document.getElementById('map'); - var controlHeight = getMap.clientHeight - 40; - if (controlHeight < legendHeight) + var acceptableHeight = this._map._size.y - (this._container.offsetTop * 4); + if (acceptableHeight < this._form.clientHeight) { - getLegendDiv.style.height = controlHeight + 'px'; - getLegendDiv.style.overflowY = 'scroll'; - getLegendDiv.style.paddingRight = '10px'; + L.DomUtil.addClass(this._form, 'leaflet-control-layers-scrollbar'); + this._form.style.height = acceptableHeight + 'px'; } },