- I created a prototype using material-UI chips.
- Upon clicking the Test IPA, the textbox should appear right below the text Test IPA.
- In the prototype, it does show up below the text but when I include other functionalities, it ends up at the bottom instead.
- After some debugging in the CSS, I found that the issue lies in the absolute positioning for each scenario, which seems to be coming from material UI.
- Do you have any suggestions on how to resolve this while maintaining compatibility with other components?
- Below, I've provided my code snippet, sandbox link, and a screenshot of the bug.
Problem encountered with other components: https://codesandbox.io/s/qqqk23x3q
https://i.sstatic.net/eDUFE.png
Functioning correctly when tested individually: https://codesandbox.io/s/1y2mvo0ol3
JSX:
<td>
<ChipsTextbox chipName="test IPA" />
</td>
<Menu id="simple-menu" open={open} onClose={this.handleClose}>
<TextField onChange={this.onChange} onKeyDown={this.handleKeyPress} />
</Menu>
CSS:
.MuiPopover-paper-1706 {
outline: none;
position: absolute;
min-width: 16px;
max-width: calc(100% - 32px);
overflow-y: auto;
overflow-x: hidden;
min-height: 16px;
max-height: calc(100% - 32px);
}