Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them).

However, when using class="text-right", the text gets moved down.

Does anyone have any ideas on how to move it to the right while keeping it on 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>

You can view the result in this CodePen link:

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

cssvue.jsvuetify.js

Answer №1

After some adjustments, I managed to get it working by making the following changes:

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

I switched it to:

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

By placing "Small plates" within its own "p" element, it ensures that it will always be on the next line. To accomplish this, both lines were put in the same "p" element. Additionally, "Small plates" was enclosed in a "span" and given the .float-right Vuetify class. For more details on float classes, refer to the Vuetify docs at https://vuetifyjs.com/en/styles/float

Answer №2

The reason for this issue is that the my-4 subtitle-1 black--text element is a block element, occupying the entire width of the row. To resolve this, it's recommended to change it to display: flex and utilize the justify-content property.

Here's a more elegant solution:

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

Once you implement this, you can eliminate the need for the .text-right class.

For further insights on the various display values, check out this informative article:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble aligning my <div> element in the center and I'm not sure what the issue could be

I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...

htmlcss

Passing non-reactive data to child components in Vue.js - Explained

While we can transfer data to child components through Props, it follows a one-way data flow model. Any changes to the data in the Parent component will also impact the props in the Child component. In my scenario, I do not want a specific prop in the Chi ...

vue.jsvuejs2vue-component

The utilization of CSS within Flask can sometimes lead to a state

Struggling with a python Flask issue here and could really use some help. My CSS is completely out of whack and not displaying correctly at all. Despite setting everything up in static_files and seeing only a 304 code in the terminal, even when trying new ...

pythoncssflask

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

javascriptjquerycss

What could be causing this table to exceed its dimensions by 2 pixels?

Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...

css

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

Using Typescript inject with Vue 3 is currently not functioning as expected. The issue arises when trying to create spread types from object types

When using Vue 3 and TypeScript, an error is encountered (as shown below) only when the script lang="ts" attribute is present. Can someone provide insight into why the inject function in Vue 3 with TypeScript does not function correctly? ERROR in src/compo ...

typescriptvue.jsvuejs3

Tips for adjusting the color of the sidebar in an HTML email template

My attempt at modifying the background color of my HTML email template has been focused on changing the sidebar's white color, rather than altering the background of the email body itself. This is the CSS code I have: @import url('https://fonts. ...

htmlcssemailhtml-emailbackground-color

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs

How can I utilize a personalized SSL certificate in Nuxt during development mode?

I need to have HTTPS on localhost for a dependency I am using. To achieve this, I added the following code in my nuxt.config.js file: server: { https: { key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem') ...

vue.jsnuxt.jsnuxt.config.js

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

Where to position a button in the middle of a div that varies in size

I'm currently working with this code snippet: <div class="outer"> <ul class="list"> <li class="inner"> <div class="line">information1</div> <div class="line">hyperlink1</div&g ...

csshtmlbuttonalignment

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

I've successfully implemented a code snippet that allows image cropping using PHP, jQuery, and Ajax with the Croppie plugin. Currently, I'm facing an issue while trying to include additional input values along with the image upload process. I ...

javascriptphpjquerycssajax

The package `vue-cli-service@latest` cannot be found in the npm registry on Windows, but it works perfectly fine in WSL

I'm encountering an issue with running my Vue app using the npm run start command. When I execute this command in either PowerShell or the VS Code terminal, it returns an error message: > [email protected] C:\_code\myapp > npx vue ...

vue.jsnpm

"Implementing unique typefaces on a static website hosted on AWS

I've been attempting to incorporate a unique font into my CSS class using font-face. I have experimented with both .otf and .ttf file formats, uploading the custom font files to an S3 bucket. I made sure to grant public permissions to the font files a ...

csstwitter-bootstrapamazon-web-servicesamazon-s3font-face

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...

javascripthtmljquerycssiframe

Unable to include an additional parameter within a JavaScript function

I'm having trouble adding a parameter to the Openpopup() function - every time I try, I get an error. Can someone help me out with this? Thanks in advance. return "<a onclick='return Openpopup()' class='btn btn-info btn-lg clickBtn& ...

javascriptjquerycssasp.net

What is the priority of the asset pipeline's execution order?

What is the priority of asset pipeline? I am trying to replace a part of ace.css style with user.css.scss. The stylesheet file ace.css in the vendor folder should be overridden by user.css.scss. However, it did not work as expected even when I included ...

cssruby-on-railsasset-pipelineturbolinks

Incorporating dynamic form elements using Vue.js within a targeted div

Here is the HTML and Vue.js code that I have: <table class="table"> <thead> <tr> <td><strong>Title</strong></td> <td><strong>Description< ...

javascriptvue.js

The Reason Behind Angular Error when Using CSS Custom Tags

I have the following SCSS code: main{ width: 100%; height: 840px; /*background: red;*/ margin: 10px auto; position: relative; padding: 5px 0; } section{ width: 98%; height: 600px; margin: auto; display: flex; ...

htmlcssangular