Positioning reactive loading
I have a couple of bootstrap lines. When the user clicks on any of the lines, the popover should appear in the middle of the line and show some information. However, at the moment it jumps out far to the right, after the end of the line.
Here is my JSBin link showing the code: https://jsbin.com/rogeyufuku/1/edit?css,js,output
I tried to move it by setting positionLeft to a negative value like this:
<ReactBootstrap.Popover className="my-popover"
positionLeft={-300}
positionTop={20}
>
but it didn't work.
I also tried to manipulate it using simple old CSS rules:
.my-popover {
position: relative;
left: -200px;
}
but that didn't work either.
Is there any idea for rendering the popover overlay the way I want it?
(Including all code here for reference, but JSBin link works)
EDIT: This is what it looks like now: http://i.imgur.com/URuYthN.png This is what I want it to look like this: http://i.imgur.com/M4Hh1wI.jpg
source to share
its a bit tricky to figure out what you are trying to do, but you shouldn't use positionLeft and positionTop repositions, they will be set by the Overlay component
If you want the popover to appear in the middle, use placement
prop and values "top"
, or "bottom"
instead"right"
If you want finer control over where and how it is positioned, you will need to create your own Popover component that does something to the positionLeft and positionTop component that are passed 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 will use it like:
<Overlay>
<MyPopover>sweet content</MyPopover>
</Overlay>
source to share
Use the Popover props positionLeft and positionTop :
<Popover
id="popover-basic"
placement="right"
positionLeft={200}
positionTop={50}
title="Popover right"
>
But if you are using 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>
source to share