Show bootstrap dropdown button in cell ?

[rundis]

I guess this comes down to my lack of css-foo, but I can't figure out how to properly incorporate a bootstrap dropdown button in a cell. The button renders fine, but due to (guessing) css stacking rules the dropdown menu is not shown (or rather it's hidden behind a range absolute positioned wrapping divs).

any pointers or is this a dead end ?

cheers
magnus

[ADahmani]

I have the same problem with my component, have you figured out a solution for this problem ?

[thechrisproject]

We ran into this problem. One of our designers had solved it in a similar situation by removing all the overflow:hidden styles and using a series of descending z-indexes on the rows. The proved very difficult. We were going to render the dropdown outside the table and then try to position it on the table when clicking the dropdown arrow, but we just opted for using a very standard dropdown instead; it renders just fine over everything else.

[ADahmani]

Yeah, that was what I ended up doing when I had that problem, I noticed that a native normal dropdown works well, so that fixed my problem.

[cesarandreu]

You can use react-overlays (or react-bootstrap if you're using bootstrap styles). They provide an Overlay component. It uses Portal to append a div to the document root and then positions the overlay absolutely. The only problem is that when someone scrolls the overlay stays in the same place...

[mpritchin]

+1.
You can't just use something like react-select (but i need a component with autocomplete).
It would be great if the issue was fixed.

[beharguy]

+1
I also need a solution for the issue.
It would be great if the issue was fixed.

[warpig9]

+1

[mpritchin]

Possible workaround:

import FixedDataTable from "fixed-data-table";
import jQuery from 'jquery';

class Cell {
...
  componentDidUpdate() {
      if(this.props.isSelectedCell) {
        //fix z-index
        jQuery(this.refs.cell).parent().parent().parent().parent().parent().parent().parent().parent().parent().parent().css('z-index', 20);
      } else {
        jQuery(this.refs.cell).parent().parent().parent().parent().parent().parent().parent().parent().parent().parent().css('z-index', 0);
      }
    }
...

  render() {
    return (
      <FixedDataTable.Cell>
         <div ref="cell">
           <YourBootstrapDropdown/>
         </div>
      </FixedDataTable.Cell>
    )
  }
...
}

It looks awful, but it works (:

UPDATED:

Instead:

jQuery(this.refs.cell).parent().parent().parent().parent().parent().parent().parent().parent().parent().parent().css('z-index', 20); 

better use:

jQuery(this.refs.cell).closest('.fixedDataTableRowLayout_rowWrapper').css('z-index', 20);

[fobbyal]

@Ghbnxby react-select works with that?

[fobbyal]

I opened a new issue related to this
#379

[mpritchin]

@fobbyal Yes. I've added comment in #379 with small example