Document how to use the b-dropdown scrollable and boundary option for html elements

Is your feature request related to a problem? Please describe…

I’m using a b-dropdown inside a scrollable element and it doesn’t fit in the container. Per the documentation (https://bootstrap-vue.org/docs/components/dropdown#boundary-constraint) I need to set the boundary=“something”. Also, the dropdown is very large and needs to be scrollable.

I tried the boundary=“viewport” and “window” options and it just doesn’t constrain the dropdown or make it scrollable. I tried creating an absolutely-positioned div where the dropdown should appear, but I don’t think I’ve got the syntax right:

< b-dropdown boundary="#dropcontainer" > ...

<div id="dropcontainer"></div>

.drop-container {
  position: absolute;
  top: 100px;
  left: 100px;
  height: 100px;
  width: 200px;
}

All it does is position the dropdown as if it is a dropup.

Describe the solution you’d like

Just add an example to the docs of a scrollable dropdown in a scrollable div…

[tmorehouse]

If you are wanting the content of the menu to scroll, you will need to apply some custom CSS

<template>
  <div>
    <b-dropdown class="my-class" text="Dropdown">
       <b-dropdown-item-button>Item 1</b-dropdown-item-button>
       <b-dropdown-item-button>Item 2</b-dropdown-item-button>
       <b-dropdown-item-button>Item 3</b-dropdown-item-button>
       <b-dropdown-item-button>Item 4</b-dropdown-item-button>
       <b-dropdown-item-button>Item 5</b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

<style>
  .my-class .dropdown-menu {
    max-height: 100px;
    overflow-y: auto;
  }
</style>

If using scoped styles:

<style scoped>
  .my-class /deep/ .dropdown-menu {
    max-height: 100px;
    overflow-y: auto;
  }
</style>

[andresuchitra]

If you are wanting the content of the menu to scroll, you will need to apply some custom CSS

<template>
  <div>
    <b-dropdown class="my-class" text="Dropdown">
       <b-dropdown-item-button>Item 1</b-dropdown-item-button>
       <b-dropdown-item-button>Item 2</b-dropdown-item-button>
       <b-dropdown-item-button>Item 3</b-dropdown-item-button>
       <b-dropdown-item-button>Item 4</b-dropdown-item-button>
       <b-dropdown-item-button>Item 5</b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

<style>
  .my-class .dropdown-menu {
    max-height: 100px;
    overflow-y: auto;
  }
</style>

If using scoped styles:

<style scoped>
  .my-class /deep/ .dropdown-menu {
    max-height: 100px;
    overflow-y: auto;
  }
</style>

Alternatively you may also use:

::v-deep .dropdown-menu {
max-height: 200px;
overflow-y: auto;
}