Eric Eric - 16 days ago 11
React JSX Question

React-bootstrap Popover: Not positioned where I expect it

I am having trouble understanding how a Popover is positioned. When I added it to my button, I expected it to appear under the button, but instead it appears in the upper left of the page:

misplaced popover

Here is the code for my button component:



function HeaderLoginButton() {
return (
<div style={{ padding: "15px 0px" }}>
<OverlayTrigger trigger="click" placement="bottom" overlay={ <Login id="headerLogin" /> }>
<a className="login" style={ buttonStyle } onClick={ this.handleClick }>
Log in / sign up
</a>
</OverlayTrigger>
</div>
)
}





And here is the code for the
Login
component that wraps my popover:



function Login( props ) {
return (
<Popover id={ props.id } title={ <LoginTitle /> }>
<div className="form-group row">
<input className="dontHaveAcctCheckbox" type="checkbox" />
<label>I don't have an account, yet</label>
</div>
<div className="form-group row">
<label className="col-sm-3 col-xs-3 control-label">Email: </label>
<input type="email" className="email col-sm-8 col-xs-8" />
</div>
<div className="form-group row">
<label className="col-sm-3 col-xs-3 control-label">Password: </label>
<input type="password" className="password col-sm-8 col-xs-8" />
</div>
<button type="button" className="loginButton btn btn-default">
Login
</button>
<button
type="button"
className="createAcctButton btn btn-default"
style={{ display: "none" }}>
Create Account
</button>
</Popover>
)
}





EDIT: It appears that the issue is my wrapping the popover in the
Login
component. If I define the
Popover
as a
const
inside the HeaderLoginComponent, it seems to position itself just fine.

Anyone know why that might be?

Answer

I wasn't passing the props through to the Popover inside my Login component. So Popover wasn't getting the values for placement, positionTop, and positionLeft that OverlayTrigger was trying to send it.

I was able to send all the props together using a JSX spread attribute as described here:

https://facebook.github.io/react/docs/transferring-props.html

Comments