How to remove vertical scrolling created by open dropdown menu

Question

It is just basic example how the vertical scroll is appearing despite of overflow-y:visible property.I have a table where i want to have horizontal scrolling in case of large data set.Horizontal scrolling should by dynamic so i set overflow-x:auto but this spoils behaviour of opening a dropdown menu which creates vertical scroll.

What is wrong?

Thank you in advance.

class Example extends React.Component {

  constructor(props){
    super(props)
  }
  
  render(){
  
    return (
      <ReactBootstrap.DropdownButton
        title='test'
        id='1'
      >
        <ReactBootstrap.MenuItem eventKey="1">Action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="2">Another action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="3" active>
          Active Item
        </ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem divider />
        <ReactBootstrap.MenuItem eventKey="4">Separated link</ReactBootstrap.MenuItem>
      </ReactBootstrap.DropdownButton>
    )
  
  }

}

ReactDOM.render(<Example />, document.getElementById('container'))

#container {

  height:50px;
  overflow-y:visible;
  overflow-x:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="container">
  
</div>

Noémie Kerroux · Accepted Answer · 2018-03-01 13:31:49Z

1

This is because of you overflow-x value, if you remove it and set overflow: hidden; it works fine :

class Example extends React.Component {

  constructor(props){
    super(props)
  }
  
  render(){
  
    return (
      <ReactBootstrap.DropdownButton
        title='test'
        id='1'
      >
        <ReactBootstrap.MenuItem eventKey="1">Action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="2">Another action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="3" active>
          Active Item
        </ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem divider />
        <ReactBootstrap.MenuItem eventKey="4">Separated link</ReactBootstrap.MenuItem>
      </ReactBootstrap.DropdownButton>
    )
  
  }

}

ReactDOM.render(<Example />, document.getElementById('container'))

#container {

  height:50px;
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="container">
  
</div>

answered Mar 1, 2018 at 13:31

Noémie Kerroux

3503 silver badges14 bronze badges

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

5 Comments

Jan Ciołek Over a year ago

Thanks for the answer but as i wrote i want to have dynamic horizontal scroll.How can i manage it?

Noémie Kerroux Over a year ago

Maybe you could try to make the container's parent scrollable

Simon Hyll Over a year ago

Have a set a height for the box then have overflow-y: auto.

Jan Ciołek Over a year ago

@SimonHyll Can not make it work,if you have solution for this problem,please provide some sort of fiddle, thanks.Height of the container is also dynamic,its just a table.

Simon Hyll Over a year ago

Use max-height. Im on vacation in spain so i dont have a computer to make a fiddle for you, writing this on my phone.

Jan Ciołek · Accepted Answer · 2018-03-03 16:46:42Z

1

The solution to this problem was to create custom Dropdown component which render its menu in Portal outside of the scope of the element where you dont want to display scrolls.You can set the menu to position:absolute and set its absolute position based on Dropdown position.

You can get Dropdown position using getBoundingClientRect

answered Mar 3, 2018 at 16:46

Jan Ciołek

1,8163 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to remove vertical scrolling created by open dropdown menu

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related