adazzle / react-data-grid

Feature-rich and customizable data grid React component
https://adazzle.github.io/react-data-grid/
Other
6.99k stars 2.18k forks source link

Problem with MultiSelectFilter #885

Closed Tanka91 closed 6 years ago

Tanka91 commented 7 years ago

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 commented 7 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.

vnallamhawk commented 6 years ago

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 commented 6 years ago

@Tanka91 : Were you able to fix the issue ?

vitorhorta commented 6 years ago

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

ianbale commented 6 years ago

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 commented 6 years ago

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

stale[bot] commented 6 years ago

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.