React-Bootstrap DropDown Button pullRight/Left

Question

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

There is actually no pullLeft. It's just pullRight={true|false}. — kavun
– kavun, Commented Mar 29, 2017 at 12:23

blackmiaool · Accepted Answer · 2017-08-04 14:11:51Z

5

+50

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.

edited Aug 4, 2017 at 14:11

answered Apr 1, 2017 at 5:50

blackmiaool

5,3942 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Bootstrap DropDown Button pullRight/Left

1 Answer 1

Live demo:

css

part of jsx

Why?

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Live demo:

css

part of jsx

Why?

Comments

Your Answer

Sign up or log in

Post as a guest

Related