CODEWITHSUNDEEP
vue.jsvuetify.js
Alex T
Alex T

Reputation: 3764

Navigation drawer inside v-card not working in Vuetify

Im trying to add navigation panel to v-card but somehow when adding the navigation drawer, everything that is in the v-card is being pushed down- out of the card.

 <v-card flat outlined>
   
      <v-navigation-drawer v-model="drawer"
      :mini-variant.sync="mini"
      permanent>
      <v-row>
       <v-btn class="float-right" icon @click.stop="mini = !mini">
                <v-icon color="black">mdi-chevron-left</v-icon>
              </v-btn>
      </v-row>
      <p>
          
        <v-card v-if="!mini">
        TEST
     </v-card></p>
    </v-navigation-drawer>

        <v-row  dense>
          <v-col cols="12">
            <PlotCard
              style="min-height: 350px"
              :value="1837.32"
              :percentage="3.2"
              :loading="isLoading1"
              percentage-label="vs last week"
              action-label="V2"
            ></PlotCard>
          </v-col>
        </v-row>



        <v-row  dense>
          <v-col cols="12">
            <table-card class="h-full" label="Recent Orders" />
          </v-col>
        </v-row>

    </v-card>

I've recreated the problem here https://codesandbox.io/s/vuetify-playground-lxq25?file=/src/components/ExampleComponent.vue:38-55

As you can see navigation drawer is in the v-card but other cards are being pushed outside. Ultimately I want to use the right attribute of navigation drawer in Vuetify to have in on the right but even normal one ins not working. Any idea why this might be happening?

EDIT: Adding absolute makes the navigation-drawer appear as overlay, but I was trying to make it appear form the right and "squeeze" the content of the card to the left.

Upvotes: 3

Views: 2482

Answers (1)

TEFO
TEFO

Reputation: 1653

vuetify have a layout system. for now you have content and navigation drawer, and the navigation drawer dont act right because it doesnt know where it belongs. you have to push your content to v-main(vuetify content layout component) and by passing app prop to navigation drawer you tell its part of layout and it is sidebar. more info: https://vuetifyjs.com/en/components/application/#default-application-markup . and pass right to push navigation to right. demo: https://codesandbox.io/s/vuetify-playground-forked-qjjnp?file=/src/components/ExampleComponent.vue

Upvotes: 3

Related Questions