Блог

Я работаю над приложением react,в котором я визуализирую таблицу, и 2 поля столбцов вместо текста содержат раскрывающееся меню, и у меня есть разные опции в этом раскрывающемся меню, раскрывающееся меню визуализируется, но при открытии раскрывающегося списка оно скрывается, как будто строка имеет ограниченный размер, что довольно неожиданно.Вот мой код:

 const StyledTable = styled(CommonInfiniteTable)`
  .ReactVirtualized__Table__Grid {
    overflow-y: visible !important;
  }

`;
export const StyledDropdownIcon = styled(Icon)`
  top: 1px !important;
  right: 5px !important;
`;
const rowHeight = 41;
const headerHeight = 30;
class DefaultCodeSetsTable extends React.Component {
  constructor(props) {
    super(props);

    this.codeDataGetter = this.codeDataGetter.bind(this);
    this.codeDescriptionDataGetter = this.codeDescriptionDataGetter.bind(this);
  }

  codeDataGetter = ({
      dataKey,
      rowData,
      rowIndex,
    }) => (
      <div>
        <Form.Select
          name='Code'
          value={this.props.codeSets.length ? this.props.codeSets[rowIndex][`${this.props.masterName}_code`] : ''}
          options={this.props.defaultCodeSetsList[rowIndex].codesOptions}
          onChange={this.handleDefaultCodeChange(rowIndex)}
          icon={
            <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
        />
      </div>

    )

    codeDescriptionDataGetter = ({
      dataKey,
      rowData,
      rowIndex,
    }) => (
      <div>
        <Form.Select
          className='drop'
          name='Code Description'
          value={this.props.codeSets.length ? this.props.codeSets[rowIndex][`${this.props.masterName}_code_description`] : ''}
          options={this.props.defaultCodeSetsList[rowIndex].codeDescOptions}
          onChange={this.handleDefaultDescriptionChange(rowIndex)}
          icon={
            <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
        />
      </div>
    )

    render() {
      const widthOfEachGrid = this.props.width / 16;
      const columns = (
        [<Column
          key={1}
          label='Master Name'
          dataKey='master_name'
          width={widthOfEachGrid * 2}
          cellDataGetter={defaultCellDataGetter}
        />,
          <Column
            className='column'
            key={2}
            label='Code'
            dataKey='code'
            width={widthOfEachGrid * 1}
            cellRenderer={this.codeDataGetter}
          />,
          <Column
            className='column'
            key={3}
            label='Code Description'
            dataKey='code_description'
            width={widthOfEachGrid * 2}
            cellRenderer={this.codeDescriptionDataGetter}
          />,


        ]
      );

      return (
        <StyledTable
          height={this.props.height}
          width={this.props.width}
          headerHeight={headerHeight}
          rowHeight={rowHeight}
          rowRenderer={this.rowRenderer}
          rowCount={this.props.codeSets.length}
          rowGetter={({ index }) => this.props.codeSets[index]}
          LoadingRow={this.props.LoadingRow}
          overscanRowCount={5}
          tabIndex={-1}
          className='ui very basic small single line striped table'
          columnsList={columns}
        />
      );
    }
}
 

В приведенной выше таблице у меня есть 3 столбца,1 из которых представляет собой обычный текст,а два других-раскрывающиеся списки с вариантами выбора, когда я открываю раскрывающийся список, это поведение:

Параметры скрываются,так как произошло переполнение, любые зацепки по этому вопросу определенно помогут!