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堆栈中提升，同时保持其视觉位置（上/下），允许它在其父项的剪切rect / box之外呈现。它非常适合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>
    );
  }

Answer 2

上面部分提到的一个解决方案是调整z-index的css类。 z-index优先于其他组件（即行）。如果您将下拉列表的css调整为具有更高的z-index，则应显示ul。

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

由overflow：hidden

2 个答案: