Handle dropdown scrolling when larger that the viewport

2016-12-11 20:01:17 -05:00 · 2016-12-11 20:01:17 -05:00 · f83178bef8
parent ed406b7997
commit f83178bef8
4 changed files with 5 additions and 3 deletions
--- a/assets/css/app.min.css
+++ b/assets/css/app.min.css
--- a/assets/js/app.min.js
+++ b/assets/js/app.min.js
--- a/assets/js/components/select-dropdown-autocomplete.js
+++ b/assets/js/components/select-dropdown-autocomplete.js
@ -161,6 +161,7 @@ KB.component('select-dropdown-autocomplete', function(containerElement, options)
            .style('top', componentPosition.bottom + 'px')
            .style('left', componentPosition.left + 'px')
            .style('width', componentPosition.width + 'px')
+            .style('maxHeight', (window.innerHeight - componentPosition.bottom - 20) + 'px')
            .mouseover(onItemMouseOver)
            .click(onItemClick)
            .for('li', itemElements)
--- a/assets/sass/_select_dropdown.sass
+++ b/assets/sass/_select_dropdown.sass
@ -11,6 +11,7 @@
  border: 1px solid #ccc
  border-radius: 3px
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
+  overflow: scroll

 .select-dropdown-menu-item
  white-space: nowrap