fix: #dropdown options list max-height issue on auto calc

dnbexperience · Apr 12, 2019 · 7c658dd · 7c658dd
1 parent 9ffe8e0
commit 7c658dd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/...design-system-portal/src/pages/uilib/components/dropdown/dropdown-properties.md b/...design-system-portal/src/pages/uilib/components/dropdown/dropdown-properties.md
@@ -4,15 +4,16 @@ draft: true
 
 import { Data } from 'Pages/uilib/components/dropdown/Examples'
 
-| Properties      | Description                                                                                                                           |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `data`          | _(mandatory)_ the data we want to fill the list with. Provide the data as a json string or data array structure.                      |
-| `selected_item` | _(optional)_ a number as a string or integer, defines the active item in the data array. The default value is the first item.         |
-| `icon`          | _(optional)_ name of icon to be included in the dropdown.                                                                             |
-| `icon_position` | _(optional)_ position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right` if not set.                          |
-| `disabled`      | _(optional)_ to disable/enable the dropdown without using the `attribute` property.                                                   |
-| `direction`     | _(optional)_ defines the direction of how the dropdown shows the options. Can be `bottom` or `top`. Defaults to `auto`.               |
-| `scrollable`    | _(optional)_ defines if the dropdown options should be scrollable (the `max-height` is set by default to `50vh`). Defaults to `true`. |
+| Properties      | Description                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `data`          | _(mandatory)_ the data we want to fill the list with. Provide the data as a json string or data array structure.                  |
+| `selected_item` | _(optional)_ a number as a string or integer, defines the active item in the data array. The default value is the first item.     |
+| `icon`          | _(optional)_ name of icon to be included in the dropdown.                                                                         |
+| `icon_position` | _(optional)_ position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right` if not set.                      |
+| `disabled`      | _(optional)_ to disable/enable the dropdown without using the `attribute` property.                                               |
+| `direction`     | _(optional)_ defines the direction of how the dropdown shows the options list. Can be `bottom` or `top`. Defaults to `auto`.      |
+| `scrollable`    | _(optional)_ defines if the options list should be scrollable (the `max-height` is set by default to `50vh`). Defaults to `true`. |
+| `max_height`    | _(optional)_ defines if the height (in `rem`) of the options list. Defualts to null, as this is set automatically by default.     |
 
 ## Data structure
 

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -393,18 +393,14 @@ export default class Dropdown extends Component {
       const elem = this._ref.current
 
       this.setDirection = () => {
-        let space =
+        const spaceToBottom =
           window.innerHeight - (getOffseTop(elem) + elem.offsetHeight)
+        console.log('spaceToBottom', spaceToBottom)
 
-        if (space < 50) {
-          this.setState({
-            max_height: space,
-            direction: 'top'
-          })
-        } else
-          this.setState({
-            max_height: space
-          })
+        this.setState({
+          direction: spaceToBottom < 80 ? 'top' : 'bottom', // 5rem = 5x16=800
+          max_height: spaceToBottom > 320 ? spaceToBottom / 16 : null // 50rem = 50x16=800
+        })
       }
 
       this.setDirection()
@@ -528,7 +524,7 @@ export default class Dropdown extends Component {
       ['aria-labelledby']: id,
       ref: this._refUl,
       style: {
-        maxHeight: max_height > 50 ? `${max_height}px` : '50vh'
+        maxHeight: max_height > 0 ? `${max_height}rem` : null
       }
     }