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

Popover body is not centered over target

Open trinile opened this issue 5 years ago • 5 comments

The popover body position is not consistent and hard to get it centered over the target (that is not moving).

trinile avatar Jul 18 '18 21:07 trinile

Its not centered when you choose above and below positions. But if you double click it, the body stay aligned with the tip. That is because when the Popover "wrapper" renders into the page for the very first time it has the property of flex-direction: row and calculates the width with the body and tip together. thats why its not centered. for above and below alignments, the flex direction should be column and for right and left row.

ruimigueldp avatar Jul 18 '18 21:07 ruimigueldp

I notice that last week. this package has a lot of potential but seems abandoned

ruimigueldp avatar Jul 18 '18 21:07 ruimigueldp

The popover seems to center properly in safari, but not in chrome.

trinile avatar Jul 18 '18 22:07 trinile

yep I notice that too! wierd, right? I cant tell why.

ruimigueldp avatar Jul 18 '18 22:07 ruimigueldp

@ruimigueldp thanks for the suggestion about the flex. I set the .Popover-below to flex-direction: column and that seemed to fix the centering issue!

trinile avatar Jul 18 '18 22:07 trinile