CODEWITHSUNDEEP
cssvue.jsvuetify.js
Alex T
Alex T

Reputation: 3754

Placing aligning text on the same line in vuetify

I'm trying to align text so that part of it is on the left side of the card and the other part is on the right (basically there is space in between)

However using class="text-right" moves the text down.

Any one has idea how can move it to the right but keep it in the same line?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-card
      
      class="mx-auto"
    width="400"
    >

  
      <v-card-title>Cafe Badilico</v-card-title>
  
      <v-card-text>
        <v-row
          align="center"
          class="mx-0"
        >
         
  
        </v-row>
  
        <div class="my-4 subtitle-1 black--text">
          $ • Italian,Cafe
          <p class="text-right">Small plates</p>
        </div>
  

      </v-card-text>
  
      <v-divider class="mx-4"></v-divider>
  
      <v-card-title>Tonight's availability</v-card-title>
  
      
  

    </v-card>
  </v-app>
</div>

Here is the result in codepen

https://codepen.io/pokepim/pen/ZEYZwRN

Upvotes: 6

Views: 9516

Answers (2)

Or Ben-Yossef
Or Ben-Yossef

Reputation: 419

This is because this my-4 subtitle-1 black--text is a block element which takes all the row width. You need to change it to display: flex as is the best practice to that case and use justify-content property.

Here is much elegant solution -

my-4 subtitle-1 black--text {
    display: flex;
    justify-content: space-between; // to throw each element to side.
}

Than you can remove the .text-right class.

Some valuable article about the difference of display values - https://www.bitdegree.org/learn/css-display

Upvotes: 3

JoshuaK98
JoshuaK98

Reputation: 381

I got it to work by changing 

$ • Italian,Cafe
<p class="text-right">Small plates</p>

to

<p>$ • Italian,Cafe <span class="float-right">Small plates</span></p>

With "Small plates" in its own "p" element, it'll always be on the next line. So put them both in the same "p" element. Then wrap "Small plates" in a "span" and give that span the .float-right Vuetify class. See the Vuetify docs for the float classes https://vuetifyjs.com/en/styles/float

Upvotes: 5

Related Questions