React-Bootstrap DropDown pullRight / Left Button

Question

I am using the dropdown menu upload dialog box https://react-bootstrap.imtqy.com/components.html#btn-dropdowns . pullRight and pullLeft allows pullLeft to align the position of the menu.

I do not know the width of the menu items initially. I need to calculate the runtime and conditionally align the dropdowns (pass the pullLeft / pullRight to DropdownButton ). Children ( MenuItem ) are not visible when dropping loads, only when I press the button I get the height.

My question is, do I need to calculate the click height and redisplay the entire DropdownButton component? Any better way to pass reliance on the DropdownButton component without rendering?

  <DropdownButton buttonClassName={buttonAttrs.className} pullLeft onClick={this.callToggle} bsStyle={(metadata.displayStyle === 'button' ? 'button' : 'link' )} noCaret title={title} key={"0"} id={"test"} > {this.renderChildren().map((child, index) => { return (<MenuItem eventKey={index}>{child}</MenuItem>) })} </DropdownButton> : <button {...buttonAttrs} ref="button"> 

Answer 1

Live demo:

http://codepen.io/blackmiaool/pen/dvwxzN

CSS

 .dropdown:not(.open) ul.dropdown-menu{ display:block !important; opacity:0; pointer-events:none; } 

jsx part

 <DropdownButton ref="dropdown" onClick={()=>{ const dir=Math.random()>0.5 console.log(dir) console.log(ReactDOM.findDOMNode(this).querySelector("ul").clientWidth); this.setState({ dir:dir }) }} pullLeft={this.state.dir} pullRight={this.state.dir} 

Why?

In order to get the correct ul.dropdown-menu width, you must first display the menu. But you want to get the width before showing it, so just set its opacity to 0 and pointer-events to none . Thus, the menu is hidden and can be measured.

I don’t know how you want to set pullLeft and pullRight , so I just set the direction as Math.random() and Math.random() direction and width to the console for verification.