0
私はテーブルの列の中にレンダリングされる特定のページにDropDownMenuを持っています。Material UI DropDownMenu 100%高さ
私は、メニューを開くためにクリックすると、それがページの高さを100%と表示されます。
私は、ドキュメントでこのように何も、またコミュニティを見つかりませんでした。
子コンポーネントとの相対的な/絶対的なコンテナ関係はありません。
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を使用していますか? –
問題がどこにあるかわかるようにコードを教えてください。 –