Scrollable dropdown on nav item in Vue

Question

I am using Vue.js 2.6 and I have a tab reports.

I want to vertically scroll my report options when there are more than three options.

If it helps - all those b-dropdowns are translated to li's with anchors inside when I inspect those in the browser.

<template>
  <b-navbar-nav>
    <b-nav-item">
      <router-link to="/logs" class="nav-link">General Logs</router-link>
    </b-nav-item>
    <b-nav-item-dropdown right class="nav-link">
      <template slot="button-content">
        <span>Reports</span>
      </template>
      <b-dropdown-item>Foo</b-dropdown-item>
      <b-dropdown-item>Bar</b-dropdown-item>
      <b-dropdown-item>Foo2</b-dropdown-item>
      <b-dropdown-item>Bar2</b-dropdown-item>
      <b-dropdown-item>Foo3</b-dropdown-item>
      <b-dropdown-item>Bar3</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-navbar-nav>
</template>

Deniz · Accepted Answer · 2021-04-12 15:32:02Z

2

try this:

.navbar-nav .dropdown-menu {
    overflow: auto;
    height: 100px;
}

answered Apr 12, 2021 at 15:32

Deniz

1,48819 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Scrollable dropdown on nav item in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related