Closed Tanka91 closed 6 years ago
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.
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.
@Tanka91 : Were you able to fix the issue ?
Same issue here. Trying different components for multiselect but not working.
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; }`
Stack Overflow Reference for the same. https://stackoverflow.com/questions/47561863/react-data-grid-multiselect-filter-alignment-issue/49200440#49200440
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.
WHICH VERSION OF REACT ARE YOU USING?
WHICH BROWSER ARE YOU USING?
I'm submitting a ... (check one with "x")
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.