Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups

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

The goal is to keep the height of the box consistent even when the description varies

Here's my codepen link :

https://codepen.io/positivethinking639/pen/dyyWadg?editors=1010


  <v-container fluid>
    <v-row dense>
      <v-col
        v-for="card in cards"
        :key="card.title"
        :cols="card.flex"
      >
        <v-card>
          <v-img
            :src="card.src"
            class="white--text align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            height="200px"
          >

          </v-img>
          <v-card-text v-text="card.title"></v-card-text>
          <v-card-actions>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-bookmark</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-share-variant</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

I want to maintain the same height for each card, regardless of varying descriptions

Any tips on how to achieve that?

cssvue.jsvue-componentvuetify.js

Answer №1

The code above appears to be in good shape, but you just need to include the "d-flex" class in your columns inside the row to ensure they have the same height as the other columns.

For a working example, please visit: https://codepen.io/chansv/pen/ZEEKPaM?editors=1010

Update: The necessary fixes have been implemented to move the action of the v-card to the bottom when the flex card expands.


    <div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-system-bar
        color="indigo darken-2"
        dark
      >
        <v-spacer></v-spacer>

        <v-icon>mdi-window-minimize</v-icon>

        <v-icon>mdi-window-maximize</v-icon>

        <v-icon>mdi-close</v-icon>
      </v-system-bar>

      <v-toolbar
        color="indigo"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Discover</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-toolbar>

      <v-container fluid>
        <v-row dense>
          <v-col
            v-for="card in cards"
            :key="card.title"
            :cols="card.flex"
            class="d-flex"
          >
            <v-card class="d-flex flex-column">
              <v-img
                :src="card.src"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="200px"
              >

              </v-img>
              <v-card-text v-text="card.title"></v-card-text>
              <v-spacer></v-spacer>
              <v-card-actions>

                <v-btn icon>
                  <v-icon>mdi-heart</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-bookmark</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-share-variant</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    cards: [
      { title: 'Pre-fab homes updated', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
      { title: 'Favorite roads revised', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
      { title: 'Top airlines modified', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
    ],
  }),
})

Answer №2

Vuetify provides support for flexbox, which you can learn more about here. To implement this feature, simply include class="d-flex" in your v-col component.

<v-container fluid>
    <v-row dense>
      <v-col
        v-for="card in cards"
        :key="card.title"
        :cols="card.flex"
        class="d-flex"
      >
        <v-card class="d-flex flex-column">
          <v-img
            :src="card.src"
            class="white--text align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            height="200px"
          >

          </v-img>
          <v-card-text v-text="card.title" class="flex-grow-1"></v-card-text>
          <v-card-actions>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-bookmark</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-share-variant</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

To ensure proper alignment of the content within the item:

  • Add class="d-flex flex-column" to v-card
  • Add class="flex-grow-1" to your v-card-text

  • Override styling form v-responsive (potentially a better solution could be utilized)

    .v-responsive {
  flex: unset;  
}

Visit this link for an example implementation.

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

Struggling to grasp the concept of DOM Event Listeners

Hello, I have a question regarding some JavaScript code that I am struggling with. function login() { var lgin = document.getElementById("logIn"); lgin.style.display = "block"; lgin.style.position = "fixed"; lgin.style.width = "100%"; ...

javascripthtmlcssdom

Develop a unique card design using HTML and CSS

I am attempting to recreate a card design similar to the one shown in the image, but I am struggling to identify the name on the right side. Even though it is supposed to be clear, I always rely on the image as a reference. https://i.sstatic.net/hDh22.png ...

htmlcss

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

Recently, I noticed an issue with the ConfirmButtonExtender on a Cancel button. It was working perfectly fine in Firefox with a semi-transparent background and a simple modal popup. But when I tested it on IE, it showed a generic JavaScript-style alert box ...

c#htmlcssasp.net-ajax

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

What is the correct syntax for utilizing a variable in inline styles within ReactJS, specifically when working with the --i:0

            The question has been raised previously, but unfortunately, it was left unanswered in this thread. The variables play a crucial role in this piece of code as they are intended to be utilized in various CSS functions for animating them wi ...

javascripthtmlcssreactjsnext.js

What is the reason for the ID "home-ad" not functioning properly in Firefox?

While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code wor ...

htmlcssfirefox

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular

Provide alternative styling through css in instances where the Google Books API does not provide an image

How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...

javascripthtmlcss

Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome. Nevertheless, my requirement is for the first column in these rows to be full-width, while ...

javascriptcssflexboxcss-gridflexboxgrid

Modifying the appearance of PHP code by applying CSS styles to the font

Here is the HTML code: <!DOCTYPE html> <html> <head> <title>Greeting Service!</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /& ...

phphtmlcssformsswitch-statement

The submission form is being triggered immediately upon the page loading

I have a form on the landing page that sends parameters to Vuex actions. It functions correctly when I click the submit button and redirects me to the next page as expected. However, there seems to be a problem. Whenever I open or refresh the page, the par ...

javascriptvue.js

Vue 3: Utilizing the v-once directive within a for loop results in the display of

Am I making a mistake or is this a bug? It seems like a bug. The code below is displaying 2 divs with the same text: 'test1'. This is because of the 'v-once' directive. Each div should display a unique string instead. <script setup&g ...

vue.jsvuejs3

Using an npm package to include CSS styles in a stylesheet

I created an NPM package that includes a CSS file that needs to be included in my main CSS file. In a typical HTML CSS website, I would need to write @import url("./node_modules/web-creative-fonts/index.css") but what I really want is to simplify ...

cssnpmnpm-package

How to Display Element in Vue.js when Window.print is Triggered?

I'm wondering if it's possible to show a different message when a user tries to print my page. I currently have a 'Pay Now' button that isn't visible in the print preview. I'd like to display a text saying 'Visit www.exam ...

javascriptvue.jsprinting

Instructions on designing a three-column layout for six separate div elements

i am having trouble organizing 6 div elements into 3 columns per row. Currently, I have them arranged in two rows, but the issue arises when a column's h2 element is long and it pushes down the column below, creating a large space in the second row. A ...

csshtml

Exploring the integration of Passport SAML authentication for a seamless experience across both the backend Node (Express) and client Vue

I have a unique situation where I have developed an application with a Node (Express) backend, and a Vue client. Recently, I decided to implement SAML Single Sign-On (SSO) using passport for authentication. While everything works perfectly within the Expre ...

node.jsexpressvue.jspassport.jspassport-saml

Moving a file to the Download folder in Cordova

CHALLENGE: In my mobile app, I am facing an issue where I need to download a file and store it in the Download folder. The downloading process is functioning correctly. The file is successfully downloaded from the server and saved in the following direct ...

androidcordovavue.jscordova-pluginsquasar-framework

How can I use a Vue.js function to extract latitude and longitude data from a nested JSON file?

When using getcoords(), I am only getting the first latitude and longitude for all entries in my array. However, when using the normal syntax {{fire.latitude}},{{fire.longitude}}, I am able to retrieve all latitudes and longitudes. I'm not sure why t ...

listvue.jsaxiosmapscoords

Utilize ASP to limit the application of a CSS file exclusively to the child page

My website consists of a master page and several child pages. I have created specific CSS classes for styling. However, I only want certain child pages to utilize these styles while the master page should always use them. How can I limit the access to th ...

.netcss