CODEWITHSUNDEEP
htmlcssdropdownreact-bootstrap
Jan Ciołek
Jan Ciołek

Reputation: 1816

How to remove vertical scrolling created by open dropdown menu

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>

Upvotes: 1

Views: 3183

Answers (2)

Jan Ciołek
Jan Ciołek

Reputation: 1816

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

Upvotes: 1

No&#233;mie Kerroux
No&#233;mie Kerroux

Reputation: 350

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>

Upvotes: 1

Related Questions