Use !important to override CSS top property.

cjcenizal · Apr 4, 2018 · c8a3116 · c8a3116
1 parent 9ad1c82
commit c8a3116
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -117,9 +117,12 @@ export class EuiComboBox extends Component {
 
     const { position, left, top } = calculatePopoverPosition(comboBoxBounds, this.listBounds, 'bottom', 0, ['bottom', 'top']);
 
-    this.optionsList.style.top = `${top + window.scrollY}px`;
-    this.optionsList.style.left = `${left}px`;
-    this.optionsList.style.width = `${comboBoxBounds.width}px`;
+    // We use !important to override the style set by the CSS class. We have to use setAttribute
+    // over setting properties on the style object because that won't work with !important.
+    this.optionsList.setAttribute(
+      'style',
+      `top: ${top + window.scrollY}px !important; left: ${left}px; width: ${comboBoxBounds.width}px;`
+    );
 
     this.setState({
       listPosition: position,