How can I position text in the top right corner of a v-card's v-img component in Vuetify.js?

I am using Vuetify.js and I am trying to show a single word on the right side of an image within a v-card:

<v-card>
   <v-img 
        src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
        aspect-ratio="2.75">
        <span class="my-span">
          Info
        </span>
   </v-img>
</v-card>

However, the output is not as expected:

https://i.sstatic.net/wETAa.png

Even though my-span has margin-right:0;:

.my-span {
  background-color:blue;
  color:white;
  font-weight:bold;
  margin-right:0;
}

Is there a way to resolve this issue?

Codepen Link.

javascriptcssvue.jsvuetify.js

Answer №1

Utilize the CSS property float: right; to align elements to the right:

new Vue({
  el: '#app'
})
.my-span {
  background-color: blue;
  color: white;
  font-weight: bold;
  margin-right: 0;
  float: right;
}
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfb9baaabba6a9b68ffee1fce1fa">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3858696879a958ab3c2ddc0ddc6">[email protected]</a>/dist/vuetify.min.css" />
<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
            <span class="my-span">
              Info
            </span>
          </v-img>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

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

Error: The variable "Tankvalue" has not been declared

Is there a way to fix the error message I am receiving when trying to display response data in charts? The Tankvalue variable seems to be out of scope, resulting in an "undefined" error. The error message states that Tankvalue is not defined. I need to ...

javascripthtmlangularjsfusioncharts

Material UI Grid's layout does not support placing a select element within a row

As a newcomer in the world of full stack development, I am delving into coding projects to enhance my understanding of frontend technologies like React JS and Material UI. My latest endeavor involves creating a page that displays posts from the backend in ...

javascriptcssreactjsmaterial-ui

Nuxt content cannot be located on the production server

Hello, I recently integrated Nuxt content into my website. It's working perfectly during development, but for some reason it's breaking in production and I can't figure out why. Here is the code snippet from my page: const articles = await ...

vue.jsnuxt.js

Compilation error in VueJS: missing dependency detected

I am facing an issue in my VueJS project where a file I am referencing seems to be causing a compilation error. Despite being present in the node_modules directory, the dependency is declared as not found. In the image on the left, you can see the directo ...

typescriptvue.jsnpmgoogle-cloud-firestore

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...

javascripttypescriptimagebase64blob

Issues of horizontal spaces in HTML emails

We have been facing an ongoing issue with the layout of our email communications. Upon rendering in Outlook, the emails are displaying additional horizontal gaps/spaces. However, the web version of the email appears to be fine. It's unclear to us the ...

htmlcssemailoutlookhtml-email

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

Guide on incorporating one element into another with jquery

I am facing a challenge with the following code snippet: <p>Nuno</p> <p>Eimes</p> My goal is to transform it into this format: <p><a href="name/Nuno">Nuno</a></p> <p><a href="name/Eimes">Eimes& ...

javascriptjquerydom

graphic map and paintbrush

I've implemented an image map using shape circles, but now I'm looking for a way to draw visible circles or icons on the map. Is there a solution for this issue? Currently, I have used a canvas overlay on the image to draw on it This method wo ...

javascriptcanvasimagemap

javascript path as the first argument and callback as the last argument

Currently, I am in the process of creating a wrapper function for expressjs's app.get method. In these methods such as get, you can provide the path, some options, and then the callback. However, it is possible to omit the options and still have it w ...

javascriptnode.jsargumentsexpress

Enable lodash access throughout a React Native application

Is it possible to have lodash automatically accessible in all files within a React Native project without needing to import it every time? ...

javascriptreactjsreact-nativelodashmetro-bundler

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

javascriptphpjqueryhtmlajax

Troubleshooting the issue: Incompatibility between jQuery .focus() and dynamically generated list items from ng-repeat in AngularJS

I am currently working on enhancing the keyboard accessibility of a website, specifically focusing on making a dropdown menu accessible via keyboard. I am attempting to establish focus on the element with the id= list-0. Below is the HTML code snippet: & ...

javascriptjqueryangularjs

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss

Extracting information from an external website in the form of XML data

Trying to retrieve data from an XML feed on a remote website , I encountered issues parsing the XML content and kept receiving errors. Surprisingly, fetching JSON data from the same source at worked perfectly. The code snippet used for XML parsing is as f ...

javascriptjqueryhtmlxmlajax

The specified column `EventChart.åå` is not found within the existing database

I've been developing a dashboard application using Prisma, Next.js, and supabase. Recently, I encountered an issue when making a GET request. Prisma throws an error mentioning a column EventChart.åå, with a strange alphabet "åå" that I haven&apos ...

javascripttypescriptnext.jsprismasupabase

Issue: Importing an ES Module in React-gauge-chart causing error in NextJs

an error appears indicating the following: When attempting to render the package component, an issue arises with the require() function used on ES Module /node_modules/d3/src/index.js from /node_modules/react-gauge-chart/dist/GaugeChart/index.js. The s ...

javascriptreactjsnext.jscharts

Once the form is submitted, Vue automatically resets all the data

export default { data() { return { usrName: null, pass1: null, pass2: null, regState: {stateCode:-1}, } }, methods: { register: function () { this.axios.post("/login/", { baseURL: 'http://127 ...

javascriptvue.jsaxios

Troubleshooting Parallax Logic in NextJS

import Head from 'next/head' import styles from '../styles/Home.module.css' import Image from 'next/image' import React, { useRef ,useEffect, useState } from 'react'; export default function Home() { let ref = use ...

javascriptevent-handlingnext.jsdom-eventsparallax

Do you find encodeURIComponent to be extremely helpful?

I'm still puzzled about the benefit of using the JS function encodeURIComponent to encode each component of an http-get request when communicating with the server. After conducting some experiments, I found that the server (using PHP) is able to rece ...

phpjavascriptencodeuricomponent