Kevin Powell - Community•3mo ago

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

13 Replies

👻Ghost in Your pants👻•3mo ago

.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•3mo 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👻•3mo ago

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•3mo ago

The stackblitz is not working for me It can't find that repository

👻Ghost in Your pants👻•3mo ago

wdym can you send a ss?

SvenSplynter•3mo ago

Perhaps it's a private repository or something?

👻Ghost in Your pants👻•3mo ago

wait a moment

👻Ghost in Your pants👻•3mo ago

https://stackblitz.com/edit/vitejs-vite-8yexf1?file=src%2FApp.css

yesrab

StackBlitz

Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

👻Ghost in Your pants👻•3mo ago

try this

SvenSplynter•3mo 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👻•3mo ago

can we hop on a call?

SvenSplynter•3mo ago

Sure

Gaming

Programming

position absolute element is underneath other element