How to make popper show the scrollbars when it doesn't fit the viewport?

2.2k Views Asked by raldone01 At 20 October 2024 at 00:28

I have to work with pop-ups containing long lists. If the list gets too long the popper overflows the body. I would like to have the pop-up show the scrollbars instead.

Example:

<body>
  <div class="h-100 d-flex">
    <div id="container" class="mx-auto my-auto bg-grn">
      OOF
    </div>
  </div>
  <div id="tooltip" class="bg-blu overflow-auto" style="color: white">
    <!-- Ideally this should overflow -->
    Long content
  </div>
  <!-- But instead the whole body overflows -->
</body>
<script>
const tooltip = document.getElementById('tooltip')
tooltip.innerText += 'Long content'.repeat(450)

const popper = Popper.createPopper(document.getElementById("container"), tooltip, {
placement: 'right-start'
})
</script>

View it on JSFiddle. On jsFiddle the console is blocking the x scrollbar but it is there.

Original Q&A

There are 2 best solutions below

Cory Mawhorter On 21 February 2022 at 21:49 BEST ANSWER

I had forgotten how to do this and rediscovered the community modifier maxSize. Which should do what you want: https://codesandbox.io/s/great-tesla-3roz7?file=/src/index.js:222-229

Note: This code was copied from the codesandbox link above:


const applyMaxSize = {
  name: "applyMaxSize",
  enabled: true,
  phase: "beforeWrite",
  requires: ["maxSize"],
  fn({ state }) {
    const { height } = state.modifiersData.maxSize;
    state.styles.popper.maxHeight = `${height}px`;
  }
};

const reference = document.querySelector("#reference");
const popper = document.querySelector("#popper");

createPopper(reference, popper, {
  modifiers: [maxSize, applyMaxSize]
});

NearHuscarl On 18 October 2020 at 11:01

You need to set the width and height of the tooltip in order to see the scrollbar. Here's an example:

#tooltip {
  height: 150px;
  max-width: 40vw;
}

Updated JSFiddle.

How to make popper show the scrollbars when it doesn't fit the viewport?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in POPPER.JS

Trending Questions

Popular # Hahtags

Popular Questions