'Vuetify v-divider vertical too long?

enter image description here

I have this components,

<v-list-item class="paid-section-card">
            <v-list-item-content align="center">
              <v-list-item-title class="paid"
                >Belum Dikirim ></v-list-item-title
              >
            </v-list-item-content>
            <v-divider class="vertical-divider"
              vertical>
            </v-divider>
            <v-list-item-content align="center">
              <v-list-item-title class="paid"
                >Sudah Dibayar ></v-list-item-title
              >
            </v-list-item-content>
          </v-list-item>

and i am using v-divider vertical, but the vertical line is too long, and not adjust the height like the v-list-item, How can i solve this problem?

vue.jsvuetify.js


Solution 1:[1]

I have the same problem as you, my solution is to adjust the margins of the outer container. For example the code is as follows

   <v-card
      class="mt-6 pb-6"
      elevation="0"
      outlined
    >
    <v-row>Content 1 <v-row>
<v-divider vertical></v-divider>

 <v-row>Content 2 <v-row>
    <v-card>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 shark.tar.gz

Related Questions