2017-04-26 23 views
0

私はテーブルの列の中にレンダリングされる特定のページにDropDownMenuを持っています。Material 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; 
} 

これはそれを台無しにしていました。