diff --git a/scss/_infowindow.scss b/scss/_infowindow.scss index f3ba00066..6f4a07666 100644 --- a/scss/_infowindow.scss +++ b/scss/_infowindow.scss @@ -13,6 +13,7 @@ width: 320px; z-index: 1; overflow: visible; + max-height: 90%; &.expandable_list { cursor: move; } @@ -40,11 +41,18 @@ cursor: move; font-size: 12px; font-weight: bold; - padding: 1em 1em 1em 2em; + padding: 1em 0em 1em 2em; z-index: 10; border-radius: inherit; } +.urvalListContainer { + margin-right: 0.5em; + max-height: 10em; + overflow-y: scroll; + scroll-behavior: smooth; +} + .expandable_list { .urval-textnode-container { font-weight: bold; diff --git a/src/infowindow.js b/src/infowindow.js index 8642128d3..03dc1e4ad 100644 --- a/src/infowindow.js +++ b/src/infowindow.js @@ -4,6 +4,7 @@ import { dom, Button } from './ui'; let parentElement; let mainContainer; let urvalContainer; +let urvalListContainer; let listContainer; let exportContainer; let groupFooterContainer; @@ -111,6 +112,8 @@ function render(viewerId) { mainContainer.id = 'sidebarcontainer'; urvalContainer = document.createElement('div'); urvalContainer.classList.add('urvalcontainer'); + urvalListContainer = document.createElement('div'); + urvalListContainer.classList.add('urvalListContainer'); // We add this so that urvalcontainer can become draggable urvalContainer.id = 'sidebarcontainer-draggable'; const urvalTextNodeContainer = document.createElement('div'); @@ -120,6 +123,7 @@ function render(viewerId) { urvalContainer.appendChild(urvalTextNodeContainer); const closeButton = createCloseButton(); urvalContainer.appendChild(dom.html(closeButton.render())); + urvalContainer.appendChild(urvalListContainer); listContainer = document.createElement('div'); listContainer.classList.add('listcontainer'); @@ -200,7 +204,7 @@ function createUrvalElement(selectionGroup, selectionGroupTitle) { urvalElement.classList.add('urvalelement'); const textNode = document.createTextNode(selectionGroupTitle); urvalElement.appendChild(textNode); - urvalContainer.appendChild(urvalElement); + urvalListContainer.appendChild(urvalElement); urvalElements.set(selectionGroup, urvalElement); urvalElement.addEventListener('click', () => { showSelectedList(selectionGroup);