<div className="inner-dark-section">
<div
className="search-section"
style={{
width: "100%",
position: "sticky",
top: "0",
zIndex: 10,
backgroundColor: "#1b1b1b",
paddingTop: "25px",
}}
>
<RepSearch queryProcessor={processQuery} currQuery={currQuery} />
</div>
</div>
There is an issue with the dropdowns (antd) in the ResSearch component. The dropdown menu does not inherit its parent's positioning and it is not fixed when scrolling, causing it to overlap other elements.
.ant-select-dropdown {
background-color: $util-dropdown;
border-radius: 5px;
box-shadow: 0 0 0 1.5px rgba(91, 91, 91, 0.5),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
position: fixed;
}
Is there a way to make the dropdown menu move along with the RepSearch component when scrolling?