Problem with dropdown

[WhiteMiata]

Hello, i'm trying to insert a dropdown button into a column. I created the custom dataFormat function and the button correctly appear in the cell but if i click on it the appearing menu is visible only for the small part inside the cell, the rest is hidden "under" the table. There's a way to make it work correctly? Thanks

[syncplify]

I have the same problem. Using a custom dataFormat function to return a dropdown makes it open UNDER the other rows. Anyone can help?

[AllenFang]

hi all, I'll check this out.

[syncplify]

Thank you! I'll be eagerly waiting for an update on this matter. :)

[AllenFang]

Hi all, the problems is hard to fix, because the following styling applied on td

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

The root cause is from overflow: hidden, but if I remove it will cause the content of td overlay to other cell if content it too large, so following is my workaround and I thinks it's much easy to solve this issue.

a) apply columnClassName on your column which contain dropdown

...
<TableHeaderColumn dataField='price' dataFormat={ activeFormatter } columnClassName='my-class'>Product Price</TableHeaderColumn>
...

b) Then override the overflow

.my-class {
    overflow: inherit !important;
}

I've tested it and it work well Feel free to ask anything if you get confusing. Thanks.

[WhiteMiata]

Hi AllenFang, thanks for the reply. Unfortunately part of the problem is still here. Your workaround worked to show the dropdown menu over the table cells but don't work over the table borders. If i open the dropdown in a table that have a height less than the one of the dropdown (as on a single row table or on the last item of a table) the menu is still hidden under the table margins and a height slider appear. I need to make it show over and outside the table itself. Can you suggest a way to make it work? Thanks. Here a couple of screenshot:

[AllenFang]

thanks @WhiteMiata, I'll keep to figure out it.

[AllenFang]

Sorry for lately reply, @WhiteMiata, did you set heigh on table? if not, you can overwrite the css:

.react-bs-container-body{
    overflow: inherit !important;
}

Anyway, sorry These is all the workaround, Hope I can solve this issue correctly

[genau7]

Hi, unfortunately this workaround doesn't solve the dropdown issue when I try to put the dropdown in the column header. I tried to put a multiselect filter in one of my columns based on the custom filter example from your demo. This is how it looks before clicking on the dropdown:

And after clicking:

Now I tried different styles and none of them help me. Any suggestions?

.dropdown-menu {
     z-index: 2000;
}

.react-bs-container-header {
    z-index: 2000;
    overflow: inherit !important;
}

.my-class {
    overflow: inherit !important;
}

.react-bs-container-body{
    z-index: -1;
    overflow: inherit !important;
}

This is what I am using for the multiselect dropdown:
https://github.com/skratchdot/react-bootstrap-multiselect

And these are its styles:
https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css

[MichalRemis]

I had similar problem, but with customEditor of a cell with dropdown. This workaround worked great, I just had to change columnClassName prop to editColumnClassName to make it work.

...
<TableHeaderColumn ... editColumnClassName='my-class'>Product Price</TableHeaderColumn>
...

[genau7]

@MichalRemis, thanks for you suggestion. Sadly it didn;t work :(

[ghost]

Didn't work for me as well, i'm trying to use react-select inside a row, any progress in this?

[namrathamyske]

I am trying to use react select too.. but not achieving the solution

[ramkrishna757575]

I am using the react-select as well, but unable to fix it. Is there any solution for it?

[softwarefactory1]

I had the same problem with the react multiselect component I solved as follows:

in the css react-bootstrap-table.css file, change the style to line 20

.react-bs-table table td, .react-bs-table table th {    / overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    /    overflow: inherit! important; }

I hope this can help you.

[carlx]

I have created custom dropdown component that solves this issue in the responsive table.

https://github.com/carlx/ReactDropDown

[AdnanBoota]

I am also having this issue, but my react-select is outside the react-bootstrap-table. The options menu is hidden, i have tried to overflow: inherit !important; but still it's not visible, any idea???

[vtarelkin]

I am also having this issue, but my react-select is outside the react-bootstrap-table. The options menu is hidden, i have tried to overflow: inherit !important; but still it's not visible, any idea???

@AdnanBoota @genau7 I had the same issue in header. It helped me to set mix-blend-mode: overlay; for the nearest column header.

[guilhermereisti]

Just set the container as 'root' on DropdownMenu.

<DropdownMenu container='root'>