CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
sirwebber
sirwebber

Reputation: 157

Have React bootstrap component (popover) change position automatically

I am currently using React Bootstrap to add Bootstrap React components to my app.

When the user clicks on the button, a popup appears, allowing the user to add an item to a list. It looks like the following:

enter image description here

When the user types in the input box and presses "Add", it adds a row to the div that the button is in. However, because the popover is added to the very end of <body>, the popover does not move as the number of rows increases. It looks like the following:

enter image description here

The applicable code looks like the following:

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()}>
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>

where this.generatePopover() makes use of the <Popover> component.

Upvotes: 5

Views: 2988

Answers (2)

Ryan Pergent
Ryan Pergent

Reputation: 5306

You can add shouldUpdatePosition to your OverlayTrigger. This options is unfortunately not documented :(

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()} shouldUpdatePosition >
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>

Upvotes: 1

Adam Zielinski
Adam Zielinski

Reputation: 2874

This should do it:

render() {
    return (
        <OverlayTrigger ref="trigger" trigger="click" placement="top" overlay={this.generatePopover()}>
            <Button bsSize="lg" onClick={this.addRow}> Add Income Source</Button>
        </OverlayTrigger>
    );
}

addRow() {
    var self = this;
    // ... your logic
    this.setState({rows: this.state.rows.concat([])}, function() {
        // when DOM is already updated
        self.refs.trigger.hide();
        self.refs.trigger.show();
    });
}

Upvotes: 1

Related Questions