Looking to create a row of three horizontal cards with uniform height that adapt to screen size.
For example:
Card A | Card B | Card C
Looking to create a row of three horizontal cards with uniform height that adapt to screen size.
For example:
Card A | Card B | Card C
Changing the display property of <Grid item /> to <Card> as mentioned in the previously provided answers can cause spacing issues (the spacing prop of <Grid container /> will not function properly). Take a look at my explanation below on how you can achieve vertical alignment of cards without any adverse effects.
If you set display: 'flex' on <Grid item />, it should be sufficient to align the heights of all <Card /> elements.
For a better visual effect of stretching <CardContent> and <CardActions> vertically, also add
display: 'flex', justifyContent: 'space-between', flexDirection: 'column'<Card /> element.
<Grid container alignItems="stretch">
<Grid item style={{display: 'flex'}}>
<Card style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
// contents of your Card
<Card/>
</Grid>
<Grid item style={{display: 'flex'}}>
<Card style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
// contents of your Card
<Card/>
</Grid>
</Grid>
To accomplish this layout, you can utilize the Grid component in the following way:
<Grid container alignItems="stretch">
<Grid item component={Card} xs>
<CardContent>
// Content for Card A
</CardContent>
<CardActions>
// Actions for Card A
</CardActions>
</Grid>
<Grid item component={Card} xs>
<CardContent>
// Content for Card B
</CardContent>
<CardActions>
// Actions for Card B
</CardActions>
</Grid>
<Grid item component={Card} xs>
<CardContent>
// Content for Card C
</CardContent>
<CardActions>
// Actions for Card C
</CardActions>
</Grid>
</Grid>
The CSS property alignItems="stretch" (which is the default setting) will stretch the height of each item in a row layout. More details can be found in this answer:
By using the xs attribute on each Grid item, you can make use of auto-layout to evenly distribute the available width among the cards.
To enhance the layout further, consider applying styles using the withStyles HOC to maintain consistent spacing and alignment of Card components:
const styles = {
card: {
// Add spacing between cards
margin: 16,
// Utilize flex layout with column direction for Card components
display: "flex",
flexDirection: "column",
// Align CardContent at the top and CardActions at the bottom
justifyContent: "space-between"
}
};
Apply these styles to each card like this:
<Grid item component={Card} xs className={classes.card}>
For a complete example demonstrating these concepts, check out this working sandbox: https://codesandbox.io/embed/r9y95vr5n
I have found a simpler solution:
import React from "react"
import { Card, CardBody, CardFooter } from "components"
import withStyles from "@material-ui/core/styles/withStyles"
const styles = {
fullHeightCard: {
height: "100%",
},
}
const Item = (props) => {
const {classes} = props
// Generate random number of paragraphs between 1 and 5
let paragraphs = 1 + Math.floor(Math.random() * Math.floor(5))
return (
<Card className={classes.fullHeightCard}>
<CardBody>
{Array(paragraphs).fill().map((_,i) => (
<p>{i+1}</p>
))}
</CardBody>
<CardFooter>
{'Footer content'}
</CardFooter>
</Card>
)
}
export default withStyles(styles)(Item)
To achieve the desired layout for your Card, you need to include the following CSS properties:
.MuiCard-root.same-height {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
By adding these properties, you will create the necessary spacing between CardContent and CardActions.
A similar solution can be found in this thread: How to make Material-UI CardActions always stick to the bottom of parent
Presenting a simple and elegant resolution.
<Card sx={{height: 100%}}>
I discovered a more efficient solution that worked perfectly: simply applying the display: grid property to the parent grid element.
<Grid container style={{ display: 'grid' }}>
<Grid item>
<Card>
// add your Card content here
<Card />
</Grid>
<Grid item>
<Card>
// add your Card content here
<Card />
</Grid>
</Grid>
Is there a way to adjust the layout of an HTML bar chart so that the names or labels appear outside of the bars, tagged to the left end? <!DOCTYPE html> <style> .chart div { font: 10px Ubuntu; background-color: white; text-align: right; ...
Currently, I am working on designing websites specifically for Android phones. However, I have encountered a major challenge due to the wide range of screen resolutions found on these devices. Some phones boast a height of 800px while others are limited to ...
After consulting the documentation, I successfully created a theme object in /theme.js. To use this theme in my application, I am importing it into a wrapper component located in _app.tsx. However, I'm struggling with passing props (such as a 'da ...
Explaining this concept may be a bit challenging, so I have included a jsfiddle demo. The issue at hand involves a bootstrap nav menu that shifts to icons when not active and expands to include words when focused. When the menu is expanded, there are no sc ...
I've been grappling with this issue for days now - I can't figure out how to automatically navigate to a specific tab when entering its URL. You can check out the code here In the code, I created a tab using Material-UI tabs component. By appen ...
I came across this link The layout works fine when the elements are limited in the #commentWrapper, but adding more items pushes everything downwards. Copying additional <li>test</li> items clearly demonstrates the issue. I want the input box ...
I've been searching for hours trying to track down the source of this strange greenish background color. I've combed through every single file and it's starting to drive me insane. Any ideas where this color could be coming from? I highly d ...
This particular image demonstrates a vertical menu that is expanded. I am looking to display only the parent tag initially and upon hovering, show the next level and so forth. function display_children($parent, $level, $categoryModel) { $result = $ca ...
Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...
Consider using this specific markup - it cannot be altered (Even though it would be simpler to add more classes or IDs). There will always be a maximum of six class "test" elements on the page, so the code can be written without certainty of their surroun ...
I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated! I'm fairly new to this, so if it&apos ...
While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...
How can I hide overflow from two fixed-height divs containing sortable lists connected to each other without affecting their connection? For example, if overflow is set to hidden, the list item doesn't display when dragged outside of the div. I' ...
My current approach involves utilizing the code below to display data fetched from Parse API into a table using AngularJS and Bootstrap. However, the JavaScript section where I have defined the controller doesn't seem to be running as expected. Below ...
I am looking to include an <AutoComplete /> field in my form. The options for this field are fetched through a get request, and here is the result displayed in the console. [ { "uid": "c34bb0ed-9f63-4803-8639-a42c7e2a8fb0&q ...
My dilemma involves aligning images from left to right with text beside each image. Here is a snippet of the code I used: <div> <p style="float: left;"><img src="images/pic1.jpg" height="141px" width="212px" border="0px"></p> & ...
My website is experiencing a strange issue where the page seems to keep extending beyond the footer due to some JS code. I am not very familiar with JavaScript and have tried different solutions without success. I have searched extensively online for a so ...
I am looking to enable row actions only for specific rows that meet certain property values. For instance, if a row has the isDeletable property set to true, I would like to display a delete icon in the actions column for that row. Your help is greatly ap ...
Located at the end of this page, you will find two distinct columns. On the right side, there is a Twitter feed, while the left side showcases a YouTube video and a comments section. Below is the HTML and CSS code that was used to create these columns: .l ...
Looking to create a set of flip cards using HTML, CSS, and jQuery. Currently facing an issue where only the first card is flipping when clicked. Any suggestions on how to modify the jQuery code to make it work for all cards would be highly appreciated. C ...