dynamically set width and height

nreese · Apr 18, 2018 · 7380a41 · 7380a41
1 parent 9fa163f
commit 7380a41
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -122,7 +122,6 @@ export class EuiComboBox extends Component {
 
     this.setState({
       width: comboBoxBounds.width,
-      optionsListHeight: listBounds.height,
       listPosition: position,
     });
   };
@@ -479,7 +478,7 @@ export class EuiComboBox extends Component {
       ...rest
     } = this.props;
 
-    const { searchValue, isListOpen, listPosition, width, optionsListHeight } = this.state;
+    const { searchValue, isListOpen, listPosition, width, } = this.state;
 
     const classes = classNames('euiComboBox', className, {
       'euiComboBox-isOpen': isListOpen,
@@ -492,7 +491,6 @@ export class EuiComboBox extends Component {
 
     if (!noSuggestions && isListOpen) {
       console.log("width", width);
-      console.log("optionsListHeight", optionsListHeight);
       optionsList = (
         <EuiPortal>
           <EuiComboBoxOptionsList
@@ -512,7 +510,6 @@ export class EuiComboBox extends Component {
             position={listPosition}
             renderOption={renderOption}
             width={width}
-            height={optionsListHeight}
           />
         </EuiPortal>
       );

diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -30,9 +30,11 @@
   }
 
   .euiComboBoxOptionsList__rowWrap {
-    @include euiScrollBar;
-
-    padding: $euiSizeS;
+    padding: 0;
     max-height: 200px;
-    overflow-y: auto;
+    overflow: hidden;
+  }
+
+  .ReactVirtualized__List {
+    @include euiScrollBar;
   }
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
@@ -37,11 +37,6 @@ export class EuiComboBoxOptionsList extends Component {
     listRef: PropTypes.func.isRequired,
     renderOption: PropTypes.func,
     width: PropTypes.number,
-    height: PropTypes.number
-  }
-
-  static defaultProps = {
-    height: 200,
   }
 
   updatePosition = () => {
@@ -102,7 +97,6 @@ export class EuiComboBoxOptionsList extends Component {
       listRef, // eslint-disable-line no-unused-vars
       updatePosition, // eslint-disable-line no-unused-vars
       width,
-      height,
       ...rest
     } = this.props;
 
@@ -151,12 +145,16 @@ export class EuiComboBoxOptionsList extends Component {
 
     const groupLabelToGroupMap = {};
 
+    const optionHeight = 27; // TODO dynamically figure this out
+    const numVisiableOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
+    const height = numVisiableOptions * optionHeight;
+
     const optionsList = (
       <List
-        width={384}
-        height={184}
+        width={width}
+        height={height}
         rowCount={matchingOptions.length}
-        rowHeight={27}
+        rowHeight={optionHeight}
         rowRenderer={({ key, index, style }) => {
           const option = matchingOptions[index];
           const {