How to make v-tabs fixed in vuejs?

Question

Is there anyway that we can fix the v-tabs? So far I tried using inside v-tab fixed-tabs but that is not working and it would really be great if anyone could help me with it.

       <v-card width="40%" class="mb-2">
            <v-toolbar flat>
                <font-awesome-icon @click="cancel" :icon="['far', 'arrow-left']"></font-awesome-icon>
                <v-toolbar-title class="ml-2">Show Summary</v-toolbar-title>
                <v-spacer />
                <bn-toolbar-btn type="text" label="Cancel" icon="times" color="secondary" @click="cancel"></bn-toolbar-btn>

                <bn-toolbar-btn
                    type="outlined"
                    right
                    label="Save"
                    @click="submit"
                ></bn-toolbar-btn>
            </v-toolbar>
            <v-divider></v-divider>
            <v-tabs v-model="activeTab" class="mb-n2" background-color="transparent">
                <v-tab ref="summaryTab1" @click="activeTab = 'tab1'" href="#tab1"> Summary Tab 1</v-tab>
                <v-tab ref="summaryTab2" @click="activeTab = 'tab2'" href="#tab2"> Summary Tab 2 </v-tab>
            </v-tabs>
            <v-card-text>
                <v-tabs-items touchless v-model="activeTab" style="background-color: transparent;">
                    <v-tab-item key="tab1" value="tab1">
                    ...
                    </v-tab-item>
                    <v-tab-item  key="tab2 value="tab2">...
                    </v-tab-item>
                </v-tabs-items>
            </v-card-text>
        </v-card>

Any help would be really appreciated as i am not finding any proper way to fix this issue. — developer, May 06 '22 at 06:25
i didn't get what you want to achieve,please explain little bit more. — Nilesh Mishra, May 08 '22 at 04:39
@NileshMishra As you can see, I have wrapped inside card v-tab. So I want the tabs i.e., tabOne, tabTwo as fixed tabs similar to fixed navbars — developer, May 08 '22 at 05:23
@NileshMishra I have updated the code with explanation. Please let me know if this is helpful — developer, May 09 '22 at 08:46
replace @click="activeTab = 'tab1'" with @click="activeTab = 0", @click="activeTab = 1" and initiallize activeTab as null — Nilesh Mishra, May 09 '22 at 10:55
@NileshMishra https://codepen.io/pen?editors=1010 This is what I am trying to achieve by making the data inside v-tab-item scrollable — developer, May 10 '22 at 05:57

score 0 · Answer 1 · answered May 19 '22 at 14:35

0

I tried using CSS as mentioned below. I created a class called activeTabs and passed it in v-tabs.

.activeTabs {
  position: sticky;
  top: 0;
  z-index: 999;
}

answered May 19 '22 at 14:35

developer

23
3
10

How to make v-tabs fixed in vuejs?

1 Answers1