CODEWITHSUNDEEP
javascriptvuejs2bootstrap-4bootstrap-vue
timmy
timmy

Reputation: 488

How to scroll Tabs in VueJS with Bootstrap-vue

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.net/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;
}

Upvotes: 2

Views: 10102

Answers (1)

kashalo
kashalo

Reputation: 3562

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.net/Ljk5a62v/

Upvotes: 8

Related Questions