react-popover icon indicating copy to clipboard operation
react-popover copied to clipboard

Limit popover to viewport

Open Ladret opened this issue 7 years ago • 1 comments

Is there a way to limit the popover so that it never renders outside of the viewport? For example if the child element that the popover is tracking is scrolled outside of the viewport, i'd like the popover to align at the top or bottom of the screen (or the scrollable element)

Ladret avatar Jan 07 '18 23:01 Ladret

Maybe something like fixed width on class Popover-body and position left using calc? Look at my code. I avoid bug with popover resize when windows resize + bug with extending out of viewport when for example you have margin-bottom in parent container of page.

.Popover {
  margin-top: 20px !important;
  left: calc(100% - 370px) !important;
}

.Popover-body {
  width: 350px;
  display: inline-flex;
  flex-direction: column;
  padding: 2rem 3rem;
  background-color: #005A31;
  color: white;
  border-radius: 0.3rem;
}

RaGreen avatar Feb 04 '18 12:02 RaGreen