Material UI DropDownMenu 占 100% 高度
Material UI DropDownMenu taking 100% height
我在 table 列内呈现的特定页面中有一个 DropDownMenu。
当我点击打开菜单时,它以页面高度的 100% 打开。
我在文档中和社区中都找不到类似的东西。
我与子组件没有 relative/absolute 容器关系。
我尝试设置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;
。说不出为什么。
[data-reactroot] {
height: 100% !important;
}
这搞砸了。
我在 table 列内呈现的特定页面中有一个 DropDownMenu。
当我点击打开菜单时,它以页面高度的 100% 打开。
我在文档中和社区中都找不到类似的东西。
我与子组件没有 relative/absolute 容器关系。
我尝试设置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;
。说不出为什么。
[data-reactroot] {
height: 100% !important;
}
这搞砸了。