Methos Methos - 20 days ago 6
React JSX Question

Positioning react-bootstrap popover

I have a couple of bootstrap rows. When the user clicks on any of the rows, a popover should appear in the middle of the row and show some information. However, at the moment it pops far right, after the end of the row.

Here is my JSBin link showing the code: https://jsbin.com/rogeyufuku/1/edit?css,js,output

I tried to reposition it by setting positionLeft to a negative value as follows:

<ReactBootstrap.Popover className="my-popover"
positionLeft={-300}
positionTop={20}
>


but that did not work.

I also tried to manipulate it using plain old CSS rules as follows:

.my-popover {
position: relative;
left: -200px;
}


but that did not work either.

Is there any idea to render the popover overlay as I desire it?

(Including all the code here for reference, but JSBin link is working)

EDIT: Here is how it looks now: http://i.imgur.com/URuYthN.png
Here is what I want it to look like: http://i.imgur.com/M4Hh1wI.jpg

Answer

its a bit hard to see what you are trying to do but you shouldn't be using the positionLeft and positionTop props, they are going to be set by the Overlay component

If you want the popover to appear in the middle, use placement prop and the values "top", or "bottom"instead of "right"

If you want finer grained control over where and how it is positioned you will need to make your own custom Popover component that does something with the positionLeft and positionTop component that are passed in to it by the Overlay component

class MyPopover extends React.Component {
  render(){
    var left = calculateMyOwnLeftPosition()

    return (
      <ReactBootstrap.Popover {...this.props} positionLeft={left}>
        { this.props.children }
      </ReactBootstrap.Popover>
    )
  }
}

and then you'd use it like:

<Overlay>
  <MyPopover>sweet content</MyPopover>
</Overlay>