Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Limit popover to viewport #166

Open
Ladret opened this issue Jan 7, 2018 · 1 comment
Open

Limit popover to viewport #166

Ladret opened this issue Jan 7, 2018 · 1 comment

Comments

@Ladret
Copy link

Ladret commented Jan 7, 2018

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)

@RaGreen
Copy link

RaGreen commented Feb 4, 2018

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants