position absolute element is underneath other element

im trying to create a dropdown component in react, the dropdown whose position is relative has a button and a div which is position absolute but the position absolute element is cropped by container of the dropdown component
<section className={styles.SnScontainer}>
<div className={styles.searchBoxContainer}>
<div className={styles.searchBox}>
<img src={search} alt='search' />
<input type='text' placeholder='Search by Product Name' />
</div>
</div>
<div className={styles.sortBox}>
<div className={styles.sortOptionsContainer}>
<button
onClick={() => {
setView("grid");
}}
className={`material-symbols-outlined ${gridView ? styles.filled : styles.unfilled} `}>
grid_view
</button>
<button
onClick={() => {
setView("list");
}}
className={`material-symbols-outlined ${gridView ? styles.unfilled : styles.filled} `}>
view_list
</button>
<DropDown name={"Headphone type"} />
<DropDown name={"Company"} />
<DropDown name={"Colour"} />
<DropDown name={"Price"} />
</div>
</div>
</section>
<section className={styles.SnScontainer}>
<div className={styles.searchBoxContainer}>
<div className={styles.searchBox}>
<img src={search} alt='search' />
<input type='text' placeholder='Search by Product Name' />
</div>
</div>
<div className={styles.sortBox}>
<div className={styles.sortOptionsContainer}>
<button
onClick={() => {
setView("grid");
}}
className={`material-symbols-outlined ${gridView ? styles.filled : styles.unfilled} `}>
grid_view
</button>
<button
onClick={() => {
setView("list");
}}
className={`material-symbols-outlined ${gridView ? styles.unfilled : styles.filled} `}>
view_list
</button>
<DropDown name={"Headphone type"} />
<DropDown name={"Company"} />
<DropDown name={"Colour"} />
<DropDown name={"Price"} />
</div>
</div>
</section>
this is the contaier of the "<DropDown />"
<div className={styles.dropDown}>
<button
onFocus={() => {
setIsOpen(true);
}}
onBlur={() => {
setIsOpen(false);
}}
className={styles.dropdownButtons}>
{name} <span className='material-symbols-outlined'>expand_more</span>
</button>
{isOpen ? (
<div open={isOpen} className={styles.dropDownMenu}>
<ul className={styles.dropDownList}>
{dropDownData && dropDownData.map((option, key) => <li key={key}>{option}</li>)}
</ul>
</div>
) : null}
</div>
<div className={styles.dropDown}>
<button
onFocus={() => {
setIsOpen(true);
}}
onBlur={() => {
setIsOpen(false);
}}
className={styles.dropdownButtons}>
{name} <span className='material-symbols-outlined'>expand_more</span>
</button>
{isOpen ? (
<div open={isOpen} className={styles.dropDownMenu}>
<ul className={styles.dropDownList}>
{dropDownData && dropDownData.map((option, key) => <li key={key}>{option}</li>)}
</ul>
</div>
) : null}
</div>
and this is the dropdown component
No description
13 Replies
👻Ghost in Your pants👻
.dropDown {
position: relative;
}

.dropdownButtons {
display: flex;
align-items: center;
background-color: #d9d9d9;
border: none;
border-radius: 1em;
padding: 2px 5px;
cursor: pointer;
flex-wrap: nowrap;
text-wrap: nowrap;
}

.dropDownMenu {
position: absolute;
width: 100px;
height: 100px;
top: 10px;
height: 100px;
width: 100px;
background-color: yellow;
}
.dropDownList {
list-style: none;
background-color: aqua;
text-align: center;
}
.dropDownList > li {
margin-top: 5px;
}
.dropDown {
position: relative;
}

.dropdownButtons {
display: flex;
align-items: center;
background-color: #d9d9d9;
border: none;
border-radius: 1em;
padding: 2px 5px;
cursor: pointer;
flex-wrap: nowrap;
text-wrap: nowrap;
}

.dropDownMenu {
position: absolute;
width: 100px;
height: 100px;
top: 10px;
height: 100px;
width: 100px;
background-color: yellow;
}
.dropDownList {
list-style: none;
background-color: aqua;
text-align: center;
}
.dropDownList > li {
margin-top: 5px;
}
and this is the css of the drop down component
SvenSplynter
SvenSplynter8mo ago
Could you create a CodePen for this? It's a bit hard to read like this. At first glance it looks like you need a position: relative on the dropdownButtons.
👻Ghost in Your pants👻
sure but i have figured out that the an over flow is causing this but just give me a min ill create a code pen https://stackblitz.com/~/github.com/yesrab/musicCart here i created a stackblitz insted
.sortOptionsContainer {
display: flex;
gap: 1em;
/* background-color: aqua; */
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.sortOptionsContainer {
display: flex;
gap: 1em;
/* background-color: aqua; */
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
if i remove the both overflow properties the issue gets fixed but in the event of view port width getting smaller i want overflow y any clue how i can get this? anyone?
SvenSplynter
SvenSplynter8mo ago
The stackblitz is not working for me It can't find that repository
👻Ghost in Your pants👻
wdym can you send a ss?
SvenSplynter
SvenSplynter8mo ago
No description
SvenSplynter
SvenSplynter8mo ago
Perhaps it's a private repository or something?
👻Ghost in Your pants👻
wait a moment
👻Ghost in Your pants👻
try this
SvenSplynter
SvenSplynter8mo ago
I can see it now. What do you mean with the smaller viewports you want overflow y? Right now your overflow y is set to hidden. This means that anything that will vertically flow out of the sortOptionsContainer will be hidden. That's why you're not seeing the dropdownMenu now, but you do see it when you remove the overflow y: hidden;
👻Ghost in Your pants👻
can we hop on a call?
SvenSplynter
SvenSplynter8mo ago
Sure
Want results from more Discord servers?
Add your server