材质UI DropDownMenu高度为100％

问题描述：

我在表格列中呈现的特定页面中有一个DropDownMenu。材质UI DropDownMenu高度为100％

Imgur

当我点击打开菜单，它与页面高度的100％打开。

Imgur

我发现没有这样的文件中，也没有社会。

我没有与子组件的相对/绝对容器关系。

我试图设置maxHeight，但是会发生同样的情况。

谢谢你的帮助。

编辑：

一些代码。

这就是DropDownMenu被实例化的组件：

export default ({ 
    variables, 
}: Props) => (
    <Table multiSelectable> 
    <TableHeader enableSelectAll> 
     <TableRow> 
     <TableHeaderColumn className={styles.headerColumn}>Variável</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Tipo</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Linha 01</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Linha 02</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Linha 03</TableHeaderColumn> 
     </TableRow> 
    </TableHeader> 
    <TableBody> 
     {variables.map(variable => (
     <TableRow key={variable.id}> 
      <TableRowColumn className={styles.column}>{variable.header}</TableRowColumn> 
      <TableRowColumn className={styles.columnDropdown}> 
      <DropDownMenu value={variable.type}> 
       <MenuItem value="numerical" primaryText="Numérica" /> 
       <MenuItem value="categorical" primaryText="Categórica" /> 
       <MenuItem value="key" primaryText="Chave" /> 
       <MenuItem value="answer" primaryText="Resposta" /> 
      </DropDownMenu> 
      </TableRowColumn> 
      {variable.line.map(line => (
      <TableRowColumn key={line} className={styles.column}>{line}</TableRowColumn> 
     ))} 
     </TableRow> 
    ))} 
    </TableBody> 
    </Table> 
);

该代码使用SASS模块：

.headerColumn { 
    font-size: 16px !important; 
} 

.column { 
    font-size: 14px !important; 
} 

.columnDropdown { 
    @extend .column; 
    padding-left: 0 !important; 
}

我没有花车，没有什么在这个组件是绝对的。分析打开的菜单，它取top: 0和max-height: 1014px;。不能说为什么。

你有没有试过用DropDown来定义'style = {{height：300}}'，我认为这应该有效。 –

你使用float吗？ –

给我们代码，以便我们可以看到问题出在哪里。 –

答

[data-reactroot] { 
    height: 100% !important; 
}

这是搞砸了。

材质UI DropDownMenu高度为100％

相关推荐