Currently, I am working on a VueJS project that utilizes bootstrap-vue. The issue I am facing is that when rendering a list of tabs, it exceeds the width of its parent container. To address this problem, I aim to implement a solution involving a set of buttons that allow users to scroll through the tab list horizontally.
After some research, I came across an example that seemed promising and managed to integrate it into my project successfully. However, I encountered difficulties when attempting to adapt it specifically for the tab components.
In my attempts to resolve this issue, I tried targeting the .nav-tabs class within the methods section. While I initially explored using .$refs, I found that accessing the actual element proved challenging as it only becomes visible upon rendering.
If anyone could provide guidance or assistance in achieving scrolling functionality for the tabs, it would be greatly appreciated.
Here is the link to the jsFiddle example
<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;
}