CODEWITHSUNDEEP
reactjspopoverreact-bootstrap
Eric
Eric

Reputation: 1444

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?

Upvotes: 6

Views: 5736

Answers (3)

Daniel Ilan
Daniel Ilan

Reputation: 21

Not sure if its relevant for new readers but I got to this answer and the solution offered was not working for me, I had to use React.forwardRef as a wrapper for my custom popover and pass the ref down as well. So something like this:

const CustomPopover = React.forwardRef((props, ref) => {
  return (
    <Popover id='popover-basic' {...props} ref={ref}>
      <Popover.Title as='h3'>Popover right</Popover.Title>
      <Popover.Content>
        And here's some <strong>amazing</strong> content. It's very engaging.
        right?
      </Popover.Content>
    </Popover>
  );
});

Upvotes: 2

Kevin G&#243;mez
Kevin G&#243;mez

Reputation: 31

Yes, as he already said props were missing, here is how the code should look like in case someone isn't sure where to pass the props:

function Login( props ) {
  return (
    <Popover id={ props.id } title={ <LoginTitle /> } {...props}>
      <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"
//rest of the code...

Upvotes: 3

Eric
Eric

Reputation: 1444

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

Upvotes: 1

Related Questions