Show material-ui cards in a row side by side

I attempted to showcase cards within a mapping loop while also utilizing the Grid in this manner.

 <div className={classes.root}>
              {data.tableData.childRows.map((el: any, idx: number) => {
                return (
                  <Grid
                    container
                    spacing={2}
                    direction="row"
                    justify="flex-start"
                    alignItems="flex-start"
                  >
                    <Grid item xs={3}>
                      <Card className={classes.root} variant="outlined">
                        <CardContent>
                          <Typography color="textPrimary" gutterBottom>
                            Name: {data.name}
                          </Typography>
                          <Typography color="textPrimary">
                            Email: {data.email}
                          </Typography>
                          <Typography color="textPrimary">
                            Gateway: {el.gateway}
                          </Typography>
                          <Typography color="textPrimary">
                            ID: {el.id}
                          </Typography>
                          <Typography color="textPrimary">
                            Created: {el.creationDate}
                          </Typography>
                        </CardContent>
                        <CardActions>
                          <Button
                            size="small"
                            onClick={() => {
                              alert("button clicked" + data.email);
                            }}
                          >
                            Action
                          </Button>
                        </CardActions>
                      </Card>
                    </Grid>
                  </Grid></pre></pre>
<p>The styling I have implemented is as follows:</p>
<pre><code>  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      padding: theme.spacing(2),
    },
  }));
  const classes = useStyles();

However, the cards are currently displayed stacked on top of each other and aligned to the left. Is there a way for me to evenly space the cards in a row?

cssreactjsflexboxmaterial-ui

Answer №1

To make your parent div element display inline, you will need to use display: flex. Copy and paste the code snippet below:

 const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      padding: theme.spacing(2),
      display: 'flex'
    }
  }));
  const classes = useStyles();

If you're interested in learning more about using flexbox, check out this helpful guide at the following link:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

Have you given this a shot?

<Box
        container
        spacing={2}
        direction="row"
        justify="space-between"
        alignItems="center"
        >

Answer №3

To display cards next to each other in a Grid on different screen sizes, use xs for small screens and xl for large screens.

For example:

<Grid xs={4}>    
</Grid>

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

ES6 scoping confusion: unraveling the mystery

I stumbled upon these two syntax methods for exporting functions. Let's say we have files named actions.js and app.js. The first method looks like this: in actions.js export function addTodo() {} export function deleteTodo() {} and in app.js I have ...

javascriptreactjsecmascript-6

IE11 displaying errors with flex-box layout in Angular8 causing screen misalignment

I'm currently experiencing a CSS issue specifically in IE11, as it seems to work fine on all other browsers except for this one. The problem arises due to the length of a string causing the screen not to fit properly within the browser window. To add ...

cssbootstrap-4flexbox

Exploring the process of retrieving parameters within a component using React Router DOM version 4

I am struggling with the following code: <BrowserRouter> <Route path="/(:filter)?" component={App} /> </BrowserRouter> In previous versions of React Router, wasn't the filter param or '' on the root supposed to be in ...

javascriptreactjsreact-routerreact-router-v4react-router-dom

Issues with getOptionLabel in Material UI

I have a constant with the following values : const Reference = [ { label: "RF-100", year: "Test" }, { label: "RF-200", year: "Test2" }, { label: "RF-300", year: "Test3" }, ]; and my Autoco ...

reactjstypescriptmaterial-ui

Is there a method in bootstrap that reveals the elements with the hidden class?

Currently, I am loading data into a bootstrap table on my JSP. The table class is hidden at the moment. After successfully uploading the data into the bootstrap table, I have implemented the following code: $(function() { var table = $('#Table') ...

javascriptjquerycsstwitter-bootstrap

Setting the CSS property `overflow-y: scroll;` does not make the element scrollable and causes it to exceed 100% of the block

I am seeking a solution to create a y-axis scrollable block within the left-navbar. The height of this block should occupy all available space within the left-navbar, ensuring that the left-navbar itself remains at 100% of the page height. The issue arise ...

htmlcsssass

Is it possible to generate an image from HTML using PHP?

Can anyone suggest a way to generate an image from pure HTML using PHP, possibly utilizing the GD library or other similar tools? I am looking to display icons from external sites and considering if creating an image would help improve load times. If not ...

phphtmlcssimagefile

Error: Unable to assign value to property 'className' of undefined object

On my http://localhost:3000/renewal page, the code looks like this: import Link from 'next/link' export default function Renewal() { return ( <header> <Link href="/"> <a> Go to home page ...

javascriptreactjsnext.js

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

I was exploring this page (http://noahsdad.com/state-fair-texas-2011/) and noticed a scrolling sidebar to the left of the content area. I'm looking to adjust it so that it is closer to the content area. Any suggestions on how to achieve this? Thank y ...

css

Can we keep a portion of the input placeholder content?

The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...

htmlcssbootstrap-4

The button's color doesn't seem to change to the correct one when clicked

Despite my efforts, I can't seem to get the button border to match the color of the hover state. I've tried using the focus selector and even the active state, but nothing seems to work. Below is the relevant code snippet from the project, and yo ...

cssbootstrap-4

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Within a dialog box body, I am attempting to display a table and have applied a CSS class to the wrapping div. When specifying the height in pixels or viewport height units, it works as expected. However, when using a percentage like 50%, the height of the ...

javascripthtmlcssecmascript-6

I'm currently attempting to incorporate the Material-UI InfoIcon into my code, but I'm unsure of how to properly integrate it within a TextField component

I am attempting to integrate the Material-UI InfoIcon into my TextField code, but I'm unsure of how to go about it. Here is the snippet of Material-UI code: <InfoIcon fontSize="small" /> This is where I would like to place it: <Grid item ...

javascriptreactjsmaterial-ui

Is the list being updated but the data not reflecting on the DOM in a ReactJS application?

My coding solution for creating a TODO list has a glitch - when I add an item, the list updates as expected, but when I try to delete an item, the list does not refresh. import React, { useEffect, useState } from 'react'; import './App.css&a ...

javascriptreactjsrxjs

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

phphtmlcss

Choose from a variety of options using Select and Checkbox components, but limit your choices to a maximum selection

Looking to implement the Select and Checkbox components from MUI with the ability for users to select multiple options. I want to limit their selection to a maximum of 3 choices, but I can't seem to find the props to set this restriction. Is there a w ...

reactjsselectmaterial-ui

What could be causing Jest to struggle with locating data-testid within the map function in React?

Having trouble testing the code below. When data-testid = 'w_1' is added to a separate deletable div, it works fine. What could be causing this issue? export default class App extends Component { clickTest(){ alert('hi'); } re ...

reactjsjestjs

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

cssbootstrap-4drop-down-menumegamenu

Apply a class styling when its parent element also has a specific class

Is there a way to target a specific group of elements when the parent class changes? For example, if the parent class is alertStateTrue or alertStateFalse. <div id="parent" class="alertStateTrue"> <div class="childAlertStateTrue"></div ...

htmlcss