How to scroll Tabs in VueJS with Bootstrap-vue

Question

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;
}

kashalo · Accepted Answer · 2019-02-28 18:10:19Z

8

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/

answered Feb 28, 2019 at 18:10

kashalo

3,5622 gold badges14 silver badges33 bronze badges

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

1 Comment

Dcoder14 Over a year ago

hey @kashalo can u plz tell me how cam i make tab content scrollable, i used a custom class as wrapper to tab-content, used height:100%, overflow-y:auto but still not working.

Collectives™ on Stack Overflow

How to scroll Tabs in VueJS with Bootstrap-vue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related