2017-04-26 66 views
0

我在表格列中呈现的特定页面中有一个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: 0max-height: 1014px;。不能说为什么。

+0

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

+0

你使用float吗? –

+0

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

回答

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

这是搞砸了。