React-virtualized dropdown menu clipped by overflow:hidden

Question

I am using react-virtualized for my table. I want to show a drop down menu on click of a button in one my cell.

Issue is my drop down menu is suppressed by the rowheight of the table.

With rowHeight={40}

With rowHeight={200}

I have played with css positioning . But nothing worked so far.

Code of drop down menu -

<div className="dropdown">
                <button className="pull-right dropdown-toggle moreOptions" data-toggle="dropdown" id={this.props.menuid} 
                onClick={this.moreOptionsClicked.bind(this, this.props.menuid, this.props.optionStyle)}>
                    <img className={this.props.menuid === this.props.moreOptionId ? this.props.optionStyle : 'option'} alt="options" 
                    src={require('../../../styles/img/' + (this.props.menuid === this.props.moreOptionId ? this.props.moreOptionIcon : 'icnOptions_16') + '.png')}>
                    </img>
                </button>
                <ul id={this.props.menuid + "dropdown"} className={this.props.moreOptionId + "dropdown" === this.props.menuid + "dropdown" ? this.props.showDropdown : 'dropdown-menu dropdownMenu hide'} >
                    <li id={this.props.menuid + "0"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "0")}><a onClick={this.previewClick.bind(this)} ><span className={(this.props.menuid + "0") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="preview" src={require('../../../styles/img/icnPreview_16.png')}></img></span><span className='labelForOption'>Preview</span></a></li>
                    <li id={this.props.menuid + "1"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "1")}><a onClick={this.openWithClick.bind(this)}><span className={(this.props.menuid + "1") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Open With" src={require('../../../styles/img/icnOpenwith_16.png')}></img></span><span className='labelForOption'>Open With</span></a></li>
                    <li id={this.props.menuid + "2"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "2")}><a onClick={this.viewClick.bind(this)}><span className={(this.props.menuid + "2") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="View Details" src={require('../../../styles/img/icnViewdetail_16.png')}></img></span><span className='labelForOption'>View Details</span></a></li>
                    <li id={this.props.menuid + "3"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "3")}><a onClick={this.downloadClick.bind(this)}><span className={(this.props.menuid + "3") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Download" src={require('../../../styles/img/icnDownload_16.png')}></img></span><span className='labelForOption'>Download</span></a></li>
                    <li id={this.props.menuid + "4"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "4")}><a onClick={this.runJobClick.bind(this)}><span className={(this.props.menuid + "4") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Run a Job" src={require('../../../styles/img/icnRunajob_16.png')}></img></span><span className='labelForOption'>Run Optistruct Job</span></a></li>

                    {this.renderProfiles()}

                    <li id={this.props.menuid + "6"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "6")}><a onClick={this.duplicateClick.bind(this)}><span className={(this.props.menuid + "6") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Duplicate" src={require('../../../styles/img/icnDuplicate_16.png')}></img></span><span className='labelForOption'>Duplicate</span></a></li>
                    <li id={this.props.menuid + "7"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "7")}><a onClick={this.moveToClick.bind(this)}><span className={(this.props.menuid + "7") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'} ><img alt="Move To" src={require('../../../styles/img/icnMoveto_16.png')}></img></span><span className='labelForOption'>Move To…</span></a></li>
                    <li id={this.props.menuid + "8"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "8")} className='shareOption'><a onClick={this.shareClick.bind(this)}><span className={(this.props.menuid + "8") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Share" src={require('../../../styles/img/icnShare_16.png')}></img></span><span className='labelForOption'>Share…</span></a></li>
                    <li id={this.props.menuid + "9"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "9")}><a onClick={this.deleteClick.bind(this)}><span className={(this.props.menuid + "9") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Delete" src={require('../../../styles/img/icnDelete_16.png')}></img></span><span className='labelForOption'>Delete</span></a></li>
                </ul>
            </div>

Any help would be greatly appreciated..

Answer 1

One solution as partially mentioned above would be to adjust the css class of z-index. A higher the z-index takes priority over other components(i.e the rows). If you adjust your css of your dropdown to have a higher z-index, the ul should show.

.dropdown < ul { z-index: 50; }

Answer 2

Check out react-portal for this. It lifts content out of the z-index stack it's in while maintaining the visual position of it (top/left), allowing it to render outside of the clipping rect/box of its parent. It's perfect for things like drop-down menus within List or Table

Something like:

  render() {
    const button = (
      <button className="pull-right dropdown-toggle moreOptions" data-toggle="dropdown" id={this.props.menuid} 
      onClick={this.moreOptionsClicked.bind(this, this.props.menuid, this.props.optionStyle)}>
          <img className={this.props.menuid === this.props.moreOptionId ? this.props.optionStyle : 'option'} alt="options" 
          src={require('../../../styles/img/' + (this.props.menuid === this.props.moreOptionId ? this.props.moreOptionIcon : 'icnOptions_16') + '.png')}>
          </img>
      </button>
    );

    return (
      <Portal closeOnEsc closeOnOutsideClick openByClickOn={button}>
        <ul id={this.props.menuid + "dropdown"} className={this.props.moreOptionId + "dropdown" === this.props.menuid + "dropdown" ? this.props.showDropdown : 'dropdown-menu dropdownMenu hide'} >
            <li id={this.props.menuid + "0"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "0")}><a onClick={this.previewClick.bind(this)} ><span className={(this.props.menuid + "0") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="preview" src={require('../../../styles/img/icnPreview_16.png')}></img></span><span className='labelForOption'>Preview</span></a></li>
            <li id={this.props.menuid + "1"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "1")}><a onClick={this.openWithClick.bind(this)}><span className={(this.props.menuid + "1") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Open With" src={require('../../../styles/img/icnOpenwith_16.png')}></img></span><span className='labelForOption'>Open With</span></a></li>
            <li id={this.props.menuid + "2"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "2")}><a onClick={this.viewClick.bind(this)}><span className={(this.props.menuid + "2") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="View Details" src={require('../../../styles/img/icnViewdetail_16.png')}></img></span><span className='labelForOption'>View Details</span></a></li>
            <li id={this.props.menuid + "3"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "3")}><a onClick={this.downloadClick.bind(this)}><span className={(this.props.menuid + "3") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Download" src={require('../../../styles/img/icnDownload_16.png')}></img></span><span className='labelForOption'>Download</span></a></li>
            <li id={this.props.menuid + "4"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "4")}><a onClick={this.runJobClick.bind(this)}><span className={(this.props.menuid + "4") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Run a Job" src={require('../../../styles/img/icnRunajob_16.png')}></img></span><span className='labelForOption'>Run Optistruct Job</span></a></li>

            {this.renderProfiles()}

            <li id={this.props.menuid + "6"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "6")}><a onClick={this.duplicateClick.bind(this)}><span className={(this.props.menuid + "6") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Duplicate" src={require('../../../styles/img/icnDuplicate_16.png')}></img></span><span className='labelForOption'>Duplicate</span></a></li>
            <li id={this.props.menuid + "7"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "7")}><a onClick={this.moveToClick.bind(this)}><span className={(this.props.menuid + "7") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'} ><img alt="Move To" src={require('../../../styles/img/icnMoveto_16.png')}></img></span><span className='labelForOption'>Move To…</span></a></li>
            <li id={this.props.menuid + "8"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "8")} className='shareOption'><a onClick={this.shareClick.bind(this)}><span className={(this.props.menuid + "8") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Share" src={require('../../../styles/img/icnShare_16.png')}></img></span><span className='labelForOption'>Share…</span></a></li>
            <li id={this.props.menuid + "9"} onMouseOver={this.mouseover.bind(this, this.props.menuid + "9")}><a onClick={this.deleteClick.bind(this)}><span className={(this.props.menuid + "9") === this.props.opacity ? 'labelForOption iconForDropdown' : 'iconForDropdown'}><img alt="Delete" src={require('../../../styles/img/icnDelete_16.png')}></img></span><span className='labelForOption'>Delete</span></a></li>
        </ul>
      </Portal>
    );
  }