We Keep Coding

How do I get my material-ui cards to lineup horizontally in row direction?

I have been pulling my hair out trying to get these material-ui cards to go in a row direction with my grid - I have used these before and had no issues making them lineup in a row direction rather than in a column direction and my code is the same as I used before.
Please let me know what mistakes I have made or solutions you know of!
Just a side note the direction, wrap, justify and alignitems properties I added to the grid have made no difference at all.
Hero.js
import { Grid, makeStyles } from '#material-ui/core'
import React from 'react'
import MediaCard from './Card'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
function Hero() {
const classes = useStyles();
return (
<div className="Hero">
<div className={classes.root}>
<Grid
Container spacing={2}
className="hero-section"
direction="row"
wrap="nowrap"
justify="center"
alignItems="center"
>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
</Grid>
</div>
</div>
)
}
export default Hero

Make page in React take up the full screen

I am working on a website using React and Material UI library and I am done with the basic layout for the home page. However, right now it is a bit awkward since the home page does not take up the full screen, leaving some empty white space at the bottom. Does anyone know how to style my home page to make it take up the full screen? Many thanks in advance
Here is the code for my home page, Home.js
import React, { useState } from 'react';
import '../styling/Home.css';
import { constants } from '../styling/Constants';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Searchbar from '../components/Searchbar';
import { StyledButton } from '../components/Button';
import BigCard from '../components/BigCard';
import SmallCard from '../components/SmallCard';
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
import { Container } from '#material-ui/core';
function Home() {
const style = {
'text-align': 'center'
}
const smallDivStyle = {
'display': 'flex',
'margin': '12px'
}
return (
<div style={style}>
<Searchbar />
{/* item xs, md changes width length of paper */}
<Container>
<Grid container>
<Grid item xs={12}>
<BigCard></BigCard>
</Grid>
</Grid>
</Container>
<br></br>
<Container>
<Grid container>
<Grid item md={4}>
<SmallCard></SmallCard>
</Grid>
<Grid item md={4}>
<SmallCard></SmallCard>
</Grid>
<Grid item md={4}>
<SmallCard></SmallCard>
</Grid>
</Grid>
</Container>
</div>
)
}
export default Home;

Whichever element is your background, target with the the css:
height: 100vh;
Which makes the element the same height as your screen. If you have a navbar at the top then you can do this:
height: calc(100vh - <height of navbar>px);
You can also use min-height and max-height CSS selectors to ensure that it never shrinks below a certain height (e.g. for mobile displays)

Your container needs maxWidth={false} on it. The top most container.

When to use Grid item vs when not to use Grid Item to align and justify

I am curious about when I should use Grid item in order to take advantage of the Grid container props such as justify or alignItems. I was under the impression that these attributes can be only applied to the Grid item inside the Grid container. However, it does not seem so from my example (see: "option two).
For example, let's consider this simple scenario: I want a way to display three Typography text, one next the other with some space in between.
Option one:
https://codesandbox.io/s/naughty-tharp-0tof1
export default function App() {
return (
<Grid
container
direction="row"
justify="space-between"
style={{ minHeight: "100px", backgroundColor: "yellow" }}
>
<Grid item>
<Typography> First text </Typography>
</Grid>
<Grid item>
<Typography> Second text </Typography>
</Grid>
<Grid item>
<Typography> Third text </Typography>
</Grid>
</Grid>
);
}
Option two:
https://codesandbox.io/s/romantic-northcutt-kjbef
export default function App() {
return (
<Grid
container
direction="column"
justify="space-between"
style={{ minHeight: "100px", backgroundColor: "yellow" }}
>
<Typography> First text </Typography>
<Typography> Second text </Typography>
<Typography> Third text </Typography>
</Grid>
);
}
Why does justify and direction works directly on Typography as in option two? Should not they only work on Grid item?

Ciao, the Grid css will be applied to all Grid's children (independently if children are Grid item or Typography).
To explain better what I'm saying lets inspect your codesandbox examples:
Option one:
Option two:
In both cases, the div father (MuiGrid-root) will apllies his style to children.

How to Align One Item Left, and Another Right using Material UI Grid Components

I'm having a very difficult time trying to achieve something simple with the Grid Component from MaterialUI. Specifically, I'd like to align one item to the left, and another to the right on one layout row.
I've searched extensively, and have not found any solutions that work. I've tried many suggestions, including the use of justifyContent and alignContent within a Grid component, and within JSS, and the flex: 1 technique of 'pushing' content.
Relevant Code Snippets
Trying to put the <Typography> element on the left, and the <FormGroup> on the right:
<Container>
<Grid container spacing={3}>
<Grid className={classes.rowLayout}>
// Goal is to align this to the LEFT
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
// Goal is to align this to the RIGHT
<Grid item xs={3}>
<FormGroup>
// Simple `Switch` button goes here
</FormGroup>
</Grid>
</Grid>
</Grid>
</Container>
MaterialUI JSS styling:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%'
},
rowLayout: {
display: 'flex',
alignItems: 'baseline'
},
}));
I'm also finding that, generally speaking, this is requiring the use of many Grid components, and I'd love to write cleaner code if possible.
Do you have any tips or fixes to this problem?
Thanks a million,
Davis

I'm using this at the moment and it works well to align one to the far left, and one to the far right.
Inspired from: How to align flexbox columns left and right?
const useStyles = makeStyles((theme) => ({
right: {
marginLeft: 'auto'
}
}));
<Grid container alignItems="center">
<Grid>
<Typography variant="h4" component="h4">Left</Typography>
</Grid>
<Grid className={classes.right}>
<Button variant="contained" color="primary">Right</Button>
</Grid>
</Grid>

I used a different approach to list one grid item to right. Similar approach can be use to show grid items to right and one at left.
<Grid container>
<Grid item>Left</Grid>
<Grid item xs>
<Grid container direction="row-reverse">
<Grid item>Right</Grid>
</Grid>
</Grid>
</Grid>

I think the best option here is to use flex like this:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%'
},
rowLayout: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center' // To be vertically aligned
},
}));
As a second choice (and for me the best since you are using Material UI at its fullest expression which if you are using it, it's the best thing to do. Use the library as much as you can) you could do something like this:
<Container>
<Grid container spacing={3}>
<Grid container direction="row" justify="space-between" alignItems="center">
// Goal is to align this to the LEFT
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
// Goal is to align this to the RIGHT
<Grid item xs={3}>
<FormGroup>
// Simple `Switch` button goes here
</FormGroup>
</Grid>
</Grid>
</Grid>
</Container>

I have solved a similar issue using justifyContent on each of the Grid items.
<Container>
<Grid container spacing={3} alignItems="baseline">
<Grid item xs={6} sx={{
justifyContent: "flex-start"
}}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
<Grid item xs={3} sx={{
display: "flex",
justifyContent: "flex-end"
}}>
<FormGroup>
<Typography variant="h6" gutterBottom>Some Switch</Typography>
</FormGroup>
</Grid>
</Grid>
</Container>
This page gives you a really good visually interpretation of how flex works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

React instantSearch | Algolia

I'm trying to use the searchBox of react instantSearch and use the Hits to show the data in a separated component but it is not working.
To simplify my idea I have a component called Searching navbar and another one called Items container.
I want to use the search box from the Searching navbar and show the data in the Items container
Is it possible to do it like this or do I have to stick with one component ?d
`
<InstantSearch indexName="wp_searchable_posts" searchClient={searchClient} searchState={this.state.searchTerm || {
query: 'admissions' }} onSearchStateChange={this.onSearchStateChange}>
<Grid container spacing={24}>
<Grid item s={12}>
<SearchBox autofocus={true} />
<Stats />
<InfiniteHits hitComponent={Hit} />
</Grid>
{/* TODO: Align these more precisely */}
{/* <Grid item s={3} style={{ alignSelf: 'center', marginTop: 4 }}>
<HierarchicalMenu attributes={[ 'post_type_label' , 'taxonomies_hierarchical.faculty-departments.lvl0' ]}
limit={50} rootPath={null} separator=" > " showMore={false} showMoreLimit={20} showParentLevel /> */}
{/* </Grid> */}
</Grid>
</InstantSearch>`
This is the code i'm using to show the search box with the results.