CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
moses toh
moses toh

Reputation: 13162

align right v-list-item-content

My script is like this :

====================-----====================-----=================== 

<template>
  <v-card
    max-width="1200"
    class="mx-auto"
  >
    <v-container
      class="pa-2"
      fluid
    >
      <v-row>
        <v-col
          v-for="(item, i) in items"
          :key="i"
        >
          <v-card
            :color="item.color"
            dark
          >
            <v-list-item three-line>

              <v-list-item-avatar
                size="125"
                tile
              >
                <v-img :src="item.src"></v-img>
              </v-list-item-avatar>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>

            </v-list-item>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          color: '#1F7087',
          src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
          title: 'Supermodel',
          artist: 'Foster the People',
        }
      ],
    }),
  }
</script>

====================-----====================-----===================

The result is like this:

Result image

I want "right align" in the right position

How can I do it?

Please help me, guys. Thank you very much

Upvotes: 2

Views: 8418

Answers (2)

srdecny
srdecny

Reputation: 603

You can use a helper class to align your text.

<v-list-item-content class="text-right align-self-start">
    <v-list-item-title
        class="headline mb-2"
        v-text="'right align'"
        >
    </v-list-item-title>
</v-list-item-content>

Upvotes: 7

MJ55
MJ55

Reputation: 281

Use <v-spacer></v-spacer> between two <v-list-item-content>.

 <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>
<!-- This one -->  <v-spacer></v-spacer> <!-- This one -->
              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>

Upvotes: 0

Related Questions