diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index 7110d905bec..49851787e4f 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -117,7 +117,7 @@ export class EuiComboBox extends Component { const { position, left, top } = calculatePopoverPosition(comboBoxBounds, this.listBounds, 'bottom', 0, ['bottom', 'top']); - this.optionsList.style.top = `${top}px`; + this.optionsList.style.top = `${top + window.scrollY}px`; this.optionsList.style.left = `${left}px`; this.optionsList.style.width = `${comboBoxBounds.width}px`; 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 index b5ebe98b712..2f3fce45414 100644 --- 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 @@ -1,7 +1,7 @@ /** * 1. Make width match that of the input and tweak position to match. - * 2. We can't use absolute position here because this will cause a scrollbar to show up when - * the portal is appended to the body. This throws off our logic for positioning the + * 2. Put the list at the top of the screen, otherwise it will cause a scrollbar to show up when + * the portal is appended to the body. This would throw off our logic for positioning the * list beneath the input. */ .euiComboBoxOptionsList { @@ -9,7 +9,8 @@ box-sizing: content-box; /* 1 */ margin-left: -1px; /* 1 */ z-index: $euiZComboBox; - position: fixed; /* 2 */ + position: absolute; /* 2 */ + top: 0; /* 2 */ } .euiComboBoxOptionsList--bottom { 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 index 651ddd89da6..de1bbeb4820 100644 --- 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 @@ -48,7 +48,6 @@ export class EuiComboBoxOptionsList extends Component { componentDidMount() { this.updatePosition(); window.addEventListener('resize', this.updatePosition); - window.addEventListener('scroll', this.updatePosition); } componentWillUpdate(nextProps) { @@ -66,7 +65,6 @@ export class EuiComboBoxOptionsList extends Component { componentWillUnmount() { window.removeEventListener('resize', this.updatePosition); - window.removeEventListener('scroll', this.updatePosition); } listRef = node => {