I have a VueJS with bootstrap-vue project. A list of tabs gets rendered but it is larger than the width of the parent. So I want to have a pair of buttons to scroll the list from left to right.

I found this example which I got working in my own project. Horizontal Scroll Using Buttons in VueJS But I can not get it to work with the tabs.

In the methods I target .nav-tabs because that is a class that gets rendered to the DOM. I tried to figure it out with .$refs but could not get to the actual element because that element is only visible once rendered.

Can someone please help to get the tabs scrolling.

/

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
    <b-row>
      <button @click="scroll_left">Scroll Left</button>
      <button @click="scroll_right">Scroll Right</button>
    </b-row>
  </div>
</div>

methods: {
     scroll_left() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft -= 50;
    },
    scroll_right() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft += 50;
    }

.tab-panel {
  flex-wrap: nowrap;
}

.wrap {
  overflow: hidden;
  width: 100%;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
}

I have a VueJS with bootstrap-vue project. A list of tabs gets rendered but it is larger than the width of the parent. So I want to have a pair of buttons to scroll the list from left to right.

I found this example which I got working in my own project. Horizontal Scroll Using Buttons in VueJS But I can not get it to work with the tabs.

In the methods I target .nav-tabs because that is a class that gets rendered to the DOM. I tried to figure it out with .$refs but could not get to the actual element because that element is only visible once rendered.

Can someone please help to get the tabs scrolling.

https://jsfiddle/timmyl/xg8j7knb/19/

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
    <b-row>
      <button @click="scroll_left">Scroll Left</button>
      <button @click="scroll_right">Scroll Right</button>
    </b-row>
  </div>
</div>

methods: {
     scroll_left() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft -= 50;
    },
    scroll_right() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft += 50;
    }

.tab-panel {
  flex-wrap: nowrap;
}

.wrap {
  overflow: hidden;
  width: 100%;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
}

• javascript
• vuejs2
• bootstrap-4
• bootstrap-vue

1 Answer 1

you just need to tweak your css a bit as currently the content of the list is expanding to full screen and you need to add the overflow property in order the content to be scrollable,

so here what you are missing:

.nav-tabs {
flex-wrap: nowrap;
white-space: nowrap;
max-width: 500px;
overflow: auto;
}

I just modified your sandbox and add the the above property to .nav-tabs

https://jsfiddle/Ljk5a62v/