CODEWITHSUNDEEP
reactjsreact-bootstrap
Methos
Methos

Reputation: 14344

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: https://i.sstatic.net/4XeBU.png Here is what I want it to look like: https://i.sstatic.net/VZaHX.jpg

Upvotes: 5

Views: 16867

Answers (2)

Geoffrey Hale
Geoffrey Hale

Reputation: 11438

Use Popover props positionLeft and positionTop:

<Popover
  id="popover-basic"
  placement="right"
  positionLeft={200}
  positionTop={50}
  title="Popover right"
>

But if you're using an OverlayTrigger use placement on OverlayTrigger:

React-Bootstrap Popovers With OverlayTrigger:

const popoverTop = (
  <Popover id="popover-positioned-top" title="Popover top">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
  <Button>Holy guacamole!</Button>
</OverlayTrigger>

Upvotes: 2

monastic-panic
monastic-panic

Reputation: 3997

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>

Upvotes: 2

Related Questions