diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 2a2b51fe7af..2fcce4ad73c 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -161,11 +161,19 @@ export const ComboBoxExample = { code: renderOptionHtml, }], text: ( -

- You can provide a renderOption prop which will accept option - and searchValue arguments. Use the value prop of the - option object to store metadata about the option for use in this callback. -

+ +

+ You can provide a renderOption prop which will accept option + and searchValue arguments. Use the value prop of the + option object to store metadata about the option for use in this callback. +

+ +

+ Note: virtualization (above) requires that each option have the same height. + Ensure that you render the options so that wrapping text is truncated instead of causing + the height of the option to change. +

+
), props: { EuiComboBox }, demo: , diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js index 2d39f806f25..611a96eddf8 100644 --- a/src-docs/src/views/combo_box/render_option.js +++ b/src-docs/src/views/combo_box/render_option.js @@ -110,11 +110,11 @@ export default class extends Component { })); }; - renderOption = (option, searchValue) => { + renderOption = (option, searchValue, contentClassName) => { const { color, label, value } = option; return ( - + {label} diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss index f38453417b4..dcfc0ae77a8 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss @@ -1,6 +1,6 @@ .euiComboBoxOption { font-size: $euiFontSizeS; - padding: $euiSizeXS $euiSizeS; + padding: $euiSizeXS $euiSizeS $euiSizeXS #{$euiSizeM + $euiSizeXS}; width: 100%; text-align: left; border: $euiBorderThin; @@ -24,3 +24,9 @@ } } } + + .euiComboBoxOption__content { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } 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 78f41468ead..99876d79ab0 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 @@ -11,6 +11,10 @@ z-index: $euiZComboBox; position: absolute; /* 2 */ top: 0; /* 2 */ + + .ReactVirtualized__List { + @include euiScrollBar; + } } .euiComboBoxOptionsList--bottom { @@ -34,7 +38,3 @@ max-height: 200px; overflow: hidden; } - - .ReactVirtualized__List { - @include euiScrollBar; - } diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_title.scss b/src/components/combo_box/combo_box_options_list/_combo_box_title.scss index 25934ca25ed..253c5e0ed62 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_title.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_title.scss @@ -4,7 +4,7 @@ */ .euiComboBoxTitle { font-size: $euiFontSizeXS; - padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS 0; /* 1 */ + padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS; /* 1 */ width: 100%; font-weight: $euiFontWeightBold; color: $euiColorFullShade; diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.js b/src/components/combo_box/combo_box_options_list/combo_box_option.js index 184712686a9..f8ca3ed15c9 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_option.js +++ b/src/components/combo_box/combo_box_options_list/combo_box_option.js @@ -36,7 +36,7 @@ export class EuiComboBoxOption extends Component { children, className, optionRef, - option, // eslint-disable-line no-unused-vars + option, onClick, // eslint-disable-line no-unused-vars onEnterKey, // eslint-disable-line no-unused-vars disabled, @@ -48,6 +48,10 @@ export class EuiComboBoxOption extends Component { className ); + const { + label, + } = option; + return (