CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsnuxt.js
Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22774

How to make the v-stepper steps always visible on top of the page?

In a Nuxt.js app using Vuetify.js framework, I have a v-stepper component which, when scrolling any page down, its steps become unvisible (I put the stepper component inside pages/index.vue). I want them to remain always visible on top.

For this purpose, I think only putting the v-stepper inside a v-toolbar component can achieve the goal, but not really: no idea how to open the v-stepper component inside layouts/default.vue and close it inside pages/index.vue:

<template>
  <v-app>
    <v-toolbar>
      <!-- open v-stepper here -->
      <v-stepper>
    </v-toolbar>
    <v-content>
      <nuxt /> <!-- closing v-stepper here does not work, -->
    </v-content>
  </v-app>
</template>

How to achieve this goal? (I am not asking for an implementation, just a hint/idea/alternative)

Upvotes: 2

Views: 3527

Answers (2)

Евгений Бондаренко
Евгений Бондаренко

Reputation: 479

.v-stepper__wrapper {
    height: auto !important;
}

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

wrap your v-stepper component with a div like <div class="sticky"><v-stepper/></div>

and add the following rules to your css :

  .sticky {
     position: fixed;
     top: 0;
     width: 100%;
   }

Upvotes: 1

Related Questions