Position des Popover im Overlay-Trigger mit react-bootstrap

Question

Bootstrap für mein Projekt. Mein JavaScript-Code folgt:

<OverlayTrigger trigger="click" placement="right" overlay={<Popover ><strong>Gender: </strong>Please select your gender</Popover>}> 

       <input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable} /> 
       </OverlayTrigger> 

auf Anklickradio Taste bietet mir Popover aber Position dieses Popover ist nur neben dieser Radio-Button.

Ich habe versucht, von CSS:

.popover .right{ 
    left: 400px 
} 

sogar mit React-Bootstrap positionLeft={400}

, das so etwas wie folgt war:

<OverlayTrigger trigger="click" placement="right" overlay={<Popover positionLeft={400} ><strong>Gender: </strong>Please select your gender</Popover>}> 

        <input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable} /> 
        </OverlayTrigger> 

noch Position popover ist das gleiche wie die Position des Funks Taste.

Wenn mir jemand helfen kann, meine Popover-Position zu verschieben, dann wird es großartig.

Vielen Dank im Voraus ..

Answer 1

Die Sache ist positionLeft prop dass Sie versuchen, durch die OverlayTrigger außer Kraft gesetzt zu verwenden und Sie should'nt es verwenden. Wenn Sie jedoch eine feinere Kontrolle über das Popover Element wünschen, schlage ich vor, Sie erstellen Ihre eigene popover component, die etwas mit der positionLeft und positionTop Komponente tut, die durch die Overlay component an sie übergeben werden.

class CustomPopover extends React.Component { 
    render(){ 

    return (
     <ReactBootstrap.Popover {...this.props} positionLeft={400}> 
     { this.props.children } 
     </ReactBootstrap.Popover> 
    ) 
    } 
} 

Sie können es verwenden, wie

<Overlay> 
    <CustomPopover><strong>Gender: </strong>Please select your gender</CustomPopover> 
</Overlay> 

Hier ist ein Thema, auf GitHub: https://github.com/react-bootstrap/react-bootstrap/issues/816. Hör zu.