Multisuggest max-height (CMEM-5868) #215
Conversation
| @@ -119,6 +119,10 @@ interface MultiSelectCommonProps<T> | |||
| * If not provided, values are filtered by their labels | |||
| */ | |||
| searchPredicate?: (item: T, query: string) => boolean; | |||
| /** | |||
| * Used to calculate the max height of the dropdown. | |||
There was a problem hiding this comment.
Varname and description is a bit misleading, at least the description should state that it is the maximum height that MultiSuggestField target and its dropdown can consume together. Also the awaited range 45..100 (default value up to 100) is important to know, same for the usnit (counts of 1/100 viewport height).
| const viewportHeight = window.innerHeight; | ||
|
|
||
| // Get the distance from the top of the page to the bottom of the input | ||
| const dropdownHeight = |
There was a problem hiding this comment.
Comment and varname are very misleading because it should be (and probably is) the height measurement of the MultiSuggestField target (not the dropdown).
| const dropdownHeight = | ||
| inputRef.current.getBoundingClientRect().top + inputRef.current.getBoundingClientRect().bottom; | ||
|
|
||
| const availableSpace = viewportHeight - dropdownHeight; |
There was a problem hiding this comment.
The calculation may be not correct because with maxHeight=true I see a set --multisuggest-max-height of "100vh" what cannot be correct, it must always be smaller.
Calculation could probably also done in CSS like calc(#maxHeightOr100#vh - MultiSuggestFieldTargetHeightInPixels) (pseudo code!, replace vars by correct values). Another option could be to do set two custom properties and then do the math in the stylesheet (e.g. max-height: calc(var(--multisuggest-max-height, 45vh) - var(--eccgui-multiselectfield-currenttargetheight, 0px)). Please test this.
There was a problem hiding this comment.
I tested this, neither of options worked for me. Maybe if you have some time you could also give it a try.
I improved the initial solution though, so now it seems to be working properly.
No description provided.