React Bootstrap: Get drop down menu width

user_2313517 0
Viewed 3368

In the below code, How do I determine the dimensions of the menu that appears when you click the button? Currently the menu I'm using is extending outside of the Window. I want to get the dimensions of the menu itself so I can adjust the style of the menu to keep it from extending outside the window.

render: function () {
            return<BS.DropdownButton title={this.props.title} style={this.state.buttonStyle}>
                <span ref="ddMenu">{this.props.children}</span>
            </BS.DropdownButton>
        }

I've tried using ref with getDOMNode().getBoundingClientRect() on the ddMenu, but the dimensions and coordinates are always 0. I've tried using this getDOMNode code in the componentDidMount function. But that runs when the button is rendered, not the menu.

react-bootstrap html javascript
3 Answers

One way to overcome this problem is to use drop directions and menu align as mentioned in the React-Bootstrap Docs.Changing the direction and the alignment of the dropdown menu was helpful for me to prevent the drop down menu extending the window.

user_88109410

Add this css to solve this issue:

   .dropdown-menu {
        min-width: auto !important;
    }
    
    #lang-nav-dropdown {
        width: fit-content;
    }
user_58974370
Related