Question 410913 in Html Question posted in
Some basic documentation can be found here.

Html – How to display long dropdowns in a `fixed` viewport?

I have a customized date picker (for the context its height is 1050px). I want to display it in a popup within dropdown content. This is my popup component.

<div
  className={styles.popupWrapper}
>
  <div className={styles.popup}>
    {popupContent comes here}
  </div>
</div>

I always want the popup to be at the center of the page so I’m using fixed position like this. For every other content this popup works absolutely fine, but when wrap my datepicker in a Dropdown and want to display it in the popup, the picker is going beyond the viewport height and I’m unable to scroll because of the fixed position. Below is the css of the popup component.

.popupWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.3);
}
.popup {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 30px 20px;
  row-gap: 10px;
  height: fit-content;
  background-color: $box-color;
  border-radius: 12px;
  z-index: 99;
}

I have tried the position absolute, it allows me to scroll but the popup does not necessarily come at a specific part of the page every time, it can be anywhere, so the top % can not be set to a fixed value and that’s not how I wanted to use my popup component.

Are there any workarounds so that I can show the entire dropdown by scrolling the page?

Tags:

2

Answers


  1. 0

    I can’t see that the dropdown being in a fixed element would stop it being scrollable.

    However, in your code you have vertically centered the content within the fixed element.

    Remove this and the element is scrollable.

    Here’s a simple example using the code you provided but ‘translated’ to plain HTML.

    <body>
  <div class="popupWrapper">
    <div class="popup">
      content<br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br> content
      <br>
    </div>
  </div>
</body>
<style>
  .popupWrapper {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.3);
  }
  
  .popup {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 30px 20px;
    row-gap: 10px;
    height: fit-content;
    /*background-color: $box-color;*/
    border-radius: 12px;
    z-index: 99;
    background-image: linear-gradient(red, yellow, blue);
  }
</style>

    Note: I didn’t understand why you needed the z-index: 99 in the child element, but left it in as doing no harm.

    Login or Signup to reply.
  2. 0

    I think you would better to use bootstrap dropdown.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search