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

Question

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:


  
    
      OOF
    
  
  
    
    Long content

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

user_9449426 · Answer

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.

user_670023 · 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]
});

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

2 Answers