CODEWITHSUNDEEP
twitter-bootstrapreactjsreact-nativereact-bootstrap
user2814819
user2814819

Reputation: 111

React-Bootstrap DropDown Button pullRight/Left

I am using react bootstrap dropdown menu https://react-bootstrap.github.io/components.html#btn-dropdowns. pullRight and pullLeft allows us to align the position of the menu .

I do not know the width of the menu items initially. I need to calculate on run time and conditionally align the dropdown items (pass the props pullLeft/pullRight to DropdownButton) . The children (MenuItem) are visible none when the drop down loads, only on button click I get the height.

My question is that, do I need to calculate the height on click and re-render the entire DropdownButton component? Any better way to pass the prop to DropdownButton component without re 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">

Upvotes: 7

Views: 10272

Answers (1)

blackmiaool
blackmiaool

Reputation: 5364

Live demo:

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

css

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

part of jsx

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

To get the correct width of ul.dropdown-menu, you should show the menu first. But you want to get the width before showing it, so just set its opacity to 0 and pointer-events to none. In this way, the menu is hidden and can be measured.

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

Upvotes: 5

Related Questions