domino-ui
domino-ui copied to clipboard
Select inner divs overlap outer divs height (domino-ui v1.0.6)
Describe the bug Using domino-ui version 1.0.6, the inner divs of Selects overlap the outer div in height, because no height:100% is set for the inner divs. For the div with class field-cntr inside the select-div, a fixed height is set by domino-ui-components.css For the divs inside the field-cntr div, no height is set. So the inner divs(flex-layout and field-input-cntr) can overlap the outer div. The issue is getting worse when the line-height property of flex-layout is being changed.
This issue can be observed without any DOM/CSS modifications with the newest Chrome-Version (126.0.6478.115). It's also present in domino-ui-demo. I'm not exactly sure why this occured now with the Chromium-Update, but changing the line-height of the table in Firefox also will lead to the same issue.
To Reproduce Steps to reproduce the behavior:
- Go to https://dominokit.com/domino-ui/demo/v1/datatable/mix-plugins
- See the Filter Selects at the top of the table
Expected behavior Inner divs should not overlap outer divs in Select
Screenshots
Desktop (please complete the following information):
- OS: Windows
- Browser [e.g. stock browser, safari]
- Version: 126.0.6478.115
Additional context Setting the height of the flex-layout and field-input-cntr divs of the select to 100% fixes this.