Problem with MultiSelectFilter

[Tanka91]

HAVE YOU ALREADY SEARCHED FOR SIMILAR ISSUES? PLEASE HELP US OUT AND DOUBLE-CHECK FIRST!

ALSO, PLEASE DON'T BE THAT PERSON WHO DELETES THIS TEMPLATE. IT'S HERE FOR A REASON.

THANKS!

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[ x] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ x] Chrome

Should work:
[x ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

When choosing a large number of parameters in the MultiSelectFilter, the parameters go beyond the window.

Expected/desired behavior

Parameters do not go beyond.

Reproduction of the problem If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

What is the motivation / use case for changing the behavior?

The correct filter operation.

[lascher]

I've been trying to modify the css in my application to work around this, but haven't found a terribly good solution. Users should be able to easily see what values they've selected - maybe grouping the selected values at the top of the dropdown list instead of putting them in the column header.

[vnallamhawk]

hi @lascher : did you get any update on this issue. Even I am facing this issue. As many values are selected, the header fields start getting bigger.

[vnallamhawk]

@Tanka91 : Were you able to fix the issue ?

[vitorhorta]

Same issue here. Trying different components for multiselect but not working.

[ianbale]

Try this CSS. It will probably need tweaking to suit your preferred font size. It's not 100% but does make it possible to add / remove large number of multi select options...

`.react-grid-Container { font-size : 10px; font-family: Roboto Mono, sans-serif; }

div.react-grid-HeaderCell .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; max-width : 100%; border : 1px solid #ddd; }

div.react-grid-HeaderCell { font-family: Raleway, sans-serif; font-weight: 700; font-size: 11px; }

div.react-grid-HeaderCell:hover { z-index:9999; overflow:visible; }

div.react-grid-HeaderCell:hover input:not(.Select-input) { max-width: 250px; width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

div.react-grid-HeaderCell div.input-sm { display : none; }

div.react-grid-HeaderCell:hover .Select div.Select-Value { clear:both; }

div.react-grid-HeaderCell .Select-control { width: 100%; }

div.react-grid-HeaderCell:hover .Select .Select-control, div.react-grid-HeaderCell:hover .Select .Select-menu-outer { width: max-content; min-width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

div.react-grid-HeaderCell:hover .Select .Select-control .Select-value { float: left; clear: left; margin-right : 20px; }

div.react-grid-HeaderCell:hover .Select .Select-multi-value-wrapper { padding : 5px; padding-top : 40px; }

div.react-grid-HeaderCell:hover .Select div.Select-input { position : absolute; left : 0; width:max-content; min-width : 220px; margin-top : -35px; margin-right : 20px; border : 1px solid #ddd; padding-right: 5px; }

div.react-grid-HeaderCell:hover .Select--multi .Select-arrow-zone, div.react-grid-HeaderCell:hover .Select--multi .Select-clear-zone { margin-left: 5px; position : absolute; }

div.react-grid-HeaderCell:hover .Select--multi .Select-arrow-zone { right : -3px; top : 7px; }

div.react-grid-HeaderCell:hover .Select--multi .Select-clear-zone { right : 3px; bottom : 3px; }

div.react-grid-HeaderCell:hover .Select--multi .Select-control .Select-value { max-height : 22px; }`

[vnallamhawk]

Stack Overflow Reference for the same. https://stackoverflow.com/questions/47561863/react-data-grid-multiselect-filter-alignment-issue/49200440#49200440

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.