On a specific page, I have a DropDownMenu embedded inside a table column.
Whenever I try to open the menu, it expands to 100% of the page height.
I couldn't find any information regarding this issue in the documentation or community forums.
The child components do not have any relative/absolute container relationship.
Even setting maxHeight did not resolve the problem.
Thank you in advance for any assistance provided.
EDIT:
Here is some code to better illustrate the situation:
This component initializes the DropDownMenu:
export default ({
variables,
}: Props) => (
<Table multiSelectable>
<TableHeader enableSelectAll>
<TableRow>
<TableHeaderColumn className={styles.headerColumn}>Variable</TableHeaderColumn>
<TableHeaderColumn className={styles.headerColumn}>Type</TableHeaderColumn>
<TableHeaderColumn className={styles.headerColumn}>Line 01</TableHeaderColumn>
<TableHeaderColumn className={styles.headerColumn}>Line 02</TableHeaderColumn>
<TableHeaderColumn className={styles.headerColumn}>Line 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="Numerical" />
<MenuItem value="categorical" primaryText="Categorical" />
<MenuItem value="key" primaryText="Key" />
<MenuItem value="answer" primaryText="Response" />
</DropDownMenu>
</TableRowColumn>
{variable.line.map(line => (
<TableRowColumn key={line} className={styles.column}>{line}</TableRowColumn>
))}
</TableRow>
))}
</TableBody>
</Table>
);
Below is the SASS module used in the code:
.headerColumn {
font-size: 16px !important;
}
.column {
font-size: 14px !important;
}
.columnDropdown {
@extend .column;
padding-left: 0 !important;
}
There are no floats or absolute positioning in this component. Upon inspection, the open Menu seems to have attributes like top: 0 and max-height: 1014px;, although the reason behind this behavior remains unclear.