反応ブートストラップを使用したオーバーレイトリガーにおけるポップオーバーの位置

Question

私のプロジェクト用のブートストラップ。 私のJavaScriptコードは以下の通りです：クリックラジオボタンを

<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> 

を私にポップオーバーを提供するが、そのポップオーバーの位置がすぐ隣というラジオボタンになっています。

は、私はCSSで試してみました：

.popover .right{ 
    left: 400px 
} 

でも使用して反応させ、ブートストラップ、次のようなものだったpositionLeft={400}

：

<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> 

まだポップオーバーの位置は、ラジオの位置と同じですボタン。

誰かが私のポップオーバーの位置をシフトするのを助けることができるなら、それは素晴らしいことでしょう。事前に

おかげで..

Answer 1

事は、あなたが使用しようとしているpositionLeft小道具はOverlayTriggerによって上書きされて、あなたはそれを使用should'nt。しかし、Popover要素を細かく制御したい場合は、Overlay componentによって渡されるpositionLeftとpositionTopコンポーネントで何かを行う独自のpopover componentを作成することをお勧めします。 https://github.com/react-bootstrap/react-bootstrap/issues/816：

class CustomPopover extends React.Component { 
    render(){ 

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

あなたがここに

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

のようにそれを使用することができますがgithubの上の問題です。見てみな。