Questions tagged [card]

No instructions have been provided for this tag just yet!

``What is the best way to create a v-toolbar with a multiline title in Vue.js

In my Vue.js app with Vuetify library, I am facing an issue with displaying v-cards titles of varying lengths. The problem is that the title breaks off and shows "...", instead of wrapping to multiple lines as needed. How can I change this? Template: < ...

Having issues with stripe payments in my ReactJS application

I've encountered an issue while attempting to process a credit card payment using Stripe. Here's the code snippet I'm currently working with: import StripeCheckout from "react-stripe-checkout" // import confirmPayment from 'stripe-element'; impor ...

What is the best way to display a lengthy string obtained from a TextField component in material-ui?

Hello, I trust you are well! I hate to bother you, but after searching for hours, I have yet to find a solution to my dilemma. I am currently grappling with the challenge of displaying long strings inside multiple cards using tooltips. Picture this scenar ...

When clicking on the Recipe button, it displays both recipes simultaneously instead of separately

When clicking on different recipe buttons, I am struggling to display only one recipe at a time instead of both at once. \First Card <Card style={{ width: '18rem' }} className="Chicken"> <Card.Img variant="top" src ...

Steps for positioning an item above CardActionArea

I would like to figure out how to position an object above the CardActionArea. For example, if I have a button on top of the CardActionArea and click on that button, both the CardAction and Button actions will be triggered simultaneously. I want it so that ...

Creation of Card Component with React Material-UI

I am facing difficulties in setting up the design for the card below. The media content is not loading and I cannot see any image on the card. Unfortunately, I am unable to share the original image due to company policies, so I have used a dummy image for ...

The functionality of item.classList.toggle() in HTML+CSS+JS fails to execute

I have been working on a program that aims to flip a card when it is clicked. The JavaScript code I have written for this functionality is as follows: /* Card flipping onclick */ import "./Stylesheets/FlipCardStyle.css" var cards = document.quer ...

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !important', }, ...

Instructions on adjusting the image size within a MUI Card

import { Card, CardActionArea, CardContent, CardMedia, Typography, } from "@mui/material"; import React from "react"; import { styled } from "@mui/material/styles"; const CardImage = styled("div")(({ theme ...