How can I make the Grid component stretch when one of the Card components contains extra text?
You can view the sample code here.
Changing the alignItems property to "flex-end" or "center" works, but when using alignItems: "stretch" it does not work.
I am using MUI Version 5. Any suggestions on how to fix this issue would be appreciated.
Issue Resolved! I have successfully addressed the problem by adjusting the heights of the cards and ensuring they are responsive. This solution may benefit you as well.
import React from "react";
import { Grid, Card } from "@mui/material";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles((theme) => ({
stretch: {
height: "100%"
}
}));
export default function MediaCard() {
const classes = useStyles();
return (
<Grid container spacing={3} justify="space-between" alignItems="stretch">
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card A</CardContent>
<CardActions>
Card A action // Card A actions // Card A actions //Card A actions// Card A actionsactions// Card A actionsactions// Card A actionsactions// Card A actions
</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent> Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
</Grid>
);
}
There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...
Imagine a scenario where there is a Layout containing NavMobile and NavDtop components, each displaying based on screen size. In order to disable the link to the current page, both components require the current pathname from next/router. const router = us ...
I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in m ...
Whenever I attempt to access https://site.con/categories/, I am greeted with a 403 Forbidden error. However, if I visit https://site.con/categories/sport, everything works perfectly fine, and all other routes function properly. What could potentially be ca ...
I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...
My React application has been up and running smoothly for some time, but recently I encountered an error when trying to make edits. The error message reads: "ERROR in EPERM: operation not permitted, open 'C:\Users\Administrator\Desktop& ...
Currently I am working with Chrome and facing an issue. For instance, I require Component.jsx and want to set a breakpoint at a specific location. When I press F12, navigate to the Sources tab, and use Ctrl+P to search, I only find 1.chunk.js, bundle.js, ...
I have been developing an express application (server-side) that offers movie information to users, and I am attempting to send a JSON response in the following format: { "title": "Star Trek: First Contact", "year": 1996, ...
I am currently working on a block type plugin for Moodle and encountering some difficulties with my JS code. Due to my limited knowledge in JS and JSON, I am having trouble identifying the issue at hand. My code includes a function that adds a custom actio ...
Is there a way in material-ui with makeStyles to spread props in an object and apply all the styles? For example: const useStyles = makeStyles(theme) => ({ card: { ...props # <- props includes properties like backgroundColor, fontSize, etc ...
After clicking a button, a function is triggered to execute. The function includes an method called "executeAction" that retrieves the current view and then passes it as a parameter to another view for future reference. async executeAction(action: ...
I am currently utilizing jQuery with chart.js to display the view counter based on month using PHP and MySql. Each page view is inserted into MySql in the following format : | id | ip | page | date(timestamp) | | 1 | 138.86.20.20 | test.p ...
Imagine a scenario where my web app utilizes AJAX to send out query #1, and then quickly follows up with query #2 before receiving a response from the server. At this point, there are two active event handlers eagerly waiting for replies. Now, let's ...
When looking at these websites as models: On each of them, I noticed that there is a well-organized column of boxes for every post. I attempted to recreate this using various methods, but couldn't achieve the exact layout on my own website. It seems ...
Why does Javascript handle relative URLs differently than standard HTML? Consider the URL provided: http://en.wikipedia.org/wiki/Rome. Launch a Firebug console (or any other Javascript console) and type in the following: var x = new XMLHttpRequest(); x.op ...
Encountering an Error . /firebase.js:2:0 Module not found: Package path . is not exported from package C:\Users\krish\Desktop\FACEBOOK _CLONE\facebook_clone\node_modules\firebase (see exports field in C:\Users\ ...
I've searched through various threads regarding this issue, but none of them provided a solution that worked for me. Encountering the error: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a b ...
I am currently facing an issue with a failing Rails integration test that has me stumped. The test utilizes Capybara with Selenium as the driver. The specific problem lies in verifying that certain page content is removed after an AJAX call is made. Essen ...
I am currently facing an issue in my React component where an element is supposed to appear after a delay of 5 seconds. I have been trying to write a test using 'jest fake timers' to check if the element appears after the specified time, but hav ...
A select2 jQuery dropdown menu is set up with two options: *For Rent *For Sales If the user selects 'For Rent', specific fields will be displayed below it, as well as for 'For Sales'. The challenge arises when both options are ...