Is there a way to ensure the alignment of items remains consistent, especially for the rightmost column, by enclosing them within a div element?

I'm currently working with Vue.js and using a UI component framework designed for it. I'm facing an issue where aligning numbers like 500 or 5000, as well as icons, is proving to be difficult. The numbers in the rightmost column need to be aligned properly, so I tried wrapping them in a div. However, I still can't get it to work correctly. Can anyone provide guidance on how to resolve this?https://i.stack.imgur.com/GspBg.png

<v-list-item
  v-for="result in results"
  :key="result.id"
  class="grey lighten-3 mb-1"
>
  <v-list-item-content class="my-1 px-2">
    <v-list-item-title>
      {{ $datetime(new Date(result.timestamp * 1000)) }}
    </v-list-item-title>
  </v-list-item-content>
  <div>
    <v-list-item-content
      v-if="$vuetify.breakpoint.smAndUp"
      class="my-1 px-2"
    >
      <v-list-item-title>
        {{ $n(result.used) }}
        <v-icon size="20">
          mdi-arrow-right-bold
        </v-icon>
      </v-list-item-title>
    </v-list-item-content>
  </div>
  <div>
    <v-list-item-content class="my-1 px-2">
      <v-list-item-title>
        {{ $n(result.point) }}
      </v-list-item-title>
    </v-list-item-content>
  </div>
</v-list-item>
htmlcssvue.jsvuetify.js

Answer №1

Check out this innovative method that utilizes subgrid to perfectly align items within deeply nested elements. Give it a try and see how effective it can be.

.entries {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  grid-auto-flow: row;
  gap: 10px;
}

.entry {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  background-color: #ccc;
  padding: 10px;
}

.before {
  justify-self: end;
}

/* if you need to align right most numbers to the right, uncomment this
.after {
  justify-self: end;
}
*/
<div class="entries">
  <div class="entry">
    <time>2024-04-17 12:12:23</time>
    <div class="before">500</div>
    <div class="arrow">👉🏻</div>
    <div class="after">5,000</div>
  </div>
  <div class="entry">
    <time>2024-04-17 12:13:23</time>
    <div class="before">500</div>
    <div class="arrow">👉🏻</div>
    <div class="after">5,000,000</div>
  </div>
  <div class="entry">
    <time>2024-04-17 12:14:23</time>
    <div class="before">500,000,000</div>
    <div class="arrow">👉🏻</div>
    <div class="after">500</div>
  </div>
  <div class="entry">
    <time>2024-04-17 12:15:23</time>
    <div class="before">500,000</div>
    <div class="arrow">👉🏻</div>
    <div class="after">1,500,000,000</div>
  </div>
</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

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

cssruby-on-railsrubyamazon-s3sass

Retrieve the hidden input values from a div using jQuery

Currently, I am in the midst of a project using CakePHP with jQuery and AJAX. Within this project, I have a div that is being repeated in a PHP loop. Here is what the div looks like: <div class="heart"> <input type="hidden" i ...

jqueryhtml

The content within the iframe is not displayed

I've set up a dropdown menu with separate iframes for each option. Here's the code I used: $(function(){ $('#klanten-lijst').on('change',function(){ $('#klanten div').hide(); $('.klant-'+t ...

javascripthtmlcssiframe

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

javascripthtmlcssangularjs

Unveiling the Server Configuration in Vue.js and Node.js

(disclaimer: I may not be the best at coding, so excuse any mistakes in my explanation.) I recently launched a Vue.js project using the standard webpack template for creating a single-page application. (I haven't made any changes to the document stru ...

node.jsvue.jsvue-router

I am unable to display the content even after setting `display: block` using the `.show()`

Hello there, I have attached my javascript and html code. While in debug mode, I can see that the CSS property 'display: none' changes to 'display: block', but for some reason, the popupEventForm does not open up. Any suggestions on why ...

javascriptjqueryhtml

Adjust the height for just one md-tab

Looking to find a way to set the height of the content within an <md-tab> element to be 100% in a flexible manner. For example, consider the following structure: <body> <md-content> <md-tabs> <md-tab label= ...

javascripthtmlcssangularjsangularjs-material

The visibility of a CSS class is rendered non-apparent when formed through the implementation

function retrieve_files(){ $.ajax({ type: "GET", url: "retrieve_files.php", cache: false, success: function(result){ $("#insideT").html(result); } }); } retrieve_files.php $dir = 'upload ...

jquerycssajax

Updating values using jQuery when tags in a single table row are changed

In my current setup, I have a table structured as follows: <table> <tbody> <tr> <td> <input type="text" class="identifier" /> </td> <td class="name"> Some value < ...

jqueryhtml

Seeking assistance with creating an iPad application utilizing JQtouch - any t

I am attempting to create an iPad app using jQuery and jQTouch for the second time. I want to split the existing jQTouch theme designed for iPhone, which uses one window, into two separate windows optimized for the iPad. My goal is to have navigation on t ...

jquerycssajaxipadjqtouch

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

javascriptcssreactjsmaterial-ui

What is the process for creating a progress bar in PixiJS?

Can someone guide me on creating a progress bar similar to the one in PixiJS? Screenshot ...

javascripthtmlcanvas

Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...

htmlcssfont-face

Apply the cursor property to the audio element and set it as a pointer

I have a question: how can I apply a cursor style to my <audio> controls? When I try to add them using CSS, the cursor only appears around the controls and not directly on the controls themselves. Below is the code snippet: <audio class="_audio" ...

javascripthtmlcss

Having trouble with jQuery loading for the first time

I am having trouble getting the jQuery to load properly. My goal is to toggle classes on specific items identified by their ID. When an item is clicked, I want it to have the class "menu-selected" while the other item has the class "unselected." I have i ...

javascriptjqueryhtmlcss

Mastering the Art of Customizing Styling in Ant Design

I'm currently working with a table from Ant Design, but I'm facing an issue where the padding or margin applied by the Ant Design CSS is preventing the table from expanding on the left side. The table has an inline CSS of table layout: auto which ...

cssreactjsant-design-pro

Creating a custom Vue.js component for specific table cells within a table row - here's how!

My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...

htmltemplatesvue.jshtml-table

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

After attempting to import through the entry file (main.js)... import Vue from 'vue' import App from '@/App' import router from '@/router/router' import store from '@/store/store' import BootstrapVue from 'boot ...

csstwitter-bootstrapwebpackvue.jscdn

Using Vue-Multiselect in conjunction with Laravel 5.3

I am relatively new to utilizing Laravel and Vue, and I require assistance with integrating Vue-Multiselect. I am unsure about how to transmit the actual options to the select component. Here is my Vue file: <template> <div class="dropdown" ...

laravel-5vue.jsmulti-select

Best practices for storing non-reactive and static data in a Vue application

Welcome to the community! I'm excited to ask my first question here on StackOverflow. I am currently working with vue.js-v2 and webpack. My goal is to ensure that data remains immutable for child components, which are loaded through the vue-router. T ...

javascriptvue.jsvuejs2data-storage