jquery - React-virtualized 下拉菜单被溢出 :hidden 截断

Question

我正在为我的表使用 react-virtualized。我想在我的单元格中单击一个按钮时显示一个下拉菜单。

问题是我的下拉菜单被表格的行高抑制了。

使用 rowHeight={40}

使用 rowHeight={200}

我玩过 css 定位。但到目前为止没有任何效果。

下拉菜单代码-

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

任何帮助将不胜感激..

Answer 1

查看 react-portal为了这。它将内容从它所在的 z-index 堆栈中提取出来，同时保持它的视觉位置(顶部/左侧)，允许它在其父级的剪切矩形/框之外呈现。它非常适合 List 或 Table

中的下拉菜单

类似于:

  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>
    );
  }