I used Container this caused all my grid items to be in columns not rows how can I fix it ?
link for project
You need to give property container to your parent grid. Your return looks like,
return (
<Container>
<Grid
container
direction="row"
sx={{
backgroundColor: "blue"
}}
justify="center"
spacing={4}
>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
d
</Grid>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
e
</Grid>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
f
</Grid>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
g
</Grid>
</Grid>
</Container>
);
Use this setup and it should work (remove direction="row" and add container)
<Grid
container
sx={{
backgroundColor: "blue",
width: "100%",
marginLeft: 0
}}
justify="center"
spacing={4}
>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
d
</Grid>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
e
</Grid>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
f
</Grid>
<Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
g
</Grid>
</Grid>
demo
Related
I have these 5 columns where I wanted them to be in one row. However, so far, this is what I got:
How do I make all of the columns be in one row?
I have also recreated this in my codesandbox: https://codesandbox.io/s/5-columns-in-one-row-0mym3j
Below are the codes:
codes:
<Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
<Box sx={{ "& h1": { m: 0 } }}>
<Grid container spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 1
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 2
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 3
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 4
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 5
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Container>
You can use wrap="nowrap" so that the item will stay in the same row.
<Grid container wrap="nowrap" sx={{ flexDirection: { xs: "column", md: "row" }}} spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card>
.
.
.
</Card>
</Grid>
</Grid>
Using MUI have two separate grids next to each other, both taking up 50% of a larger grid.
As seen in the image below, I am having a hard time matching the heights of the two sections. I would like the smaller grid items (cards) to dynamically fill in the height of the left portion and match the height of the right portion.
How is this possible with Mui?
Here is my current code:
import React from "react";
import Grid from "#mui/material/Grid";
import Box from "#mui/material/Box";
import Card from "#mui/material/Card";
import CardContent from "#mui/material/CardContent";
import Typography from "#mui/material/Typography";
import Chart from "./testChart.js";
function GeneralDashboard(props) {
const defaultStats = [
{ name: "Opportunitys Entered", value: 102 },
{ name: "Wins Reported", value: 23 },
{ name: "Win Rate", value: "60%" },
{ name: "Total Revenue", value: "$20m" },
];
return (
<>
<Box sx={{ flexGrow: 1 }}>
<Grid
container
spacing={{ xs: 1, sm: 2, lg: 2 }}
columns={{ xs: 8, sm: 8, md: 8, lg: 8 }}
>
<Grid item xs={8} sm={8} md={4} lg={4}>
<Box sx={{ flexGrow: 1 }}>
<Grid
container
spacing={{ xs: 1, sm: 2, lg: 2 }}
columns={{ xs: 4, sm: 4, md: 8, lg: 8 }}
>
{defaultStats.map((stat) => {
return (
<>
<Grid item xs={2} sm={4} md={4}>
<Card>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
{stat.name}
</Typography>
<Typography variant="h3" component="div">
{stat.value}
</Typography>
</CardContent>
</Card>
</Grid>
</>
);
})}
</Grid>
</Box>
</Grid>
<Grid item xs={8} sm={8} md={4} lg={4}>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={{ xs: 1, sm: 1, lg: 1 }}>
<Grid item xs={12}>
<Card>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
<h5>
<span>
<span className="fw-semi-bold">Re-entry</span>{" "}
timing by industry
</span>
</h5>
</Typography>
<Chart />
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
</>
);
}
You need to set the height of all containers and the item to 100%:
<Box sx={{ flexGrow: 1, height: "100%" /* <----------------------- (1) */ }}>
<Grid
sx={{ height: "100%" /* <----------------------- (2) */ }}
container
spacing={{ xs: 1, sm: 2, lg: 2 }}
columns={{ xs: 4, sm: 4, md: 8, lg: 8 }}
>
{defaultStats.map((stat) => {
return (
<>
<Grid item xs={2} sm={4} md={4}>
<Card sx={{ height: "100%" /* <----------------------- (3) */ }}>
I want to implement a basic table with listing items as key-value:
import React, {FormEvent} from 'react';
import {Box, Button, Container, Grid, TextField, Typography} from '#material-ui/core';
export default function Hello( ) {
return (
<Container>
<Grid container
direction="column"
justifyContent="space-between"
alignItems="flex-start">
<Grid item>
<Box pl={2} pb={3}>
<Typography variant="h4">
Summary
</Typography>
</Box>
</Grid>
</Grid>
<Grid item>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box component="div"
sx={{display: 'inline', p: 2, m: 2}}
>
Country 123
</Box>
</Grid>
<Grid item>
<Box component="div"
sx={{display: 'inline', p: 2, m: 2}}
>
USA
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box component="div"
sx={{display: 'inline', p: 2, m: 2}}
>
Country 4323
</Box>
</Grid>
<Grid item>
<Box component="div"
sx={{display: 'inline', p: 2, m: 2}}
>
USA
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box component="div"
sx={{display: 'inline', p: 2, m: 2}}
>
Country
</Box>
</Grid>
<Grid item>
<Box component="div"
sx={{display: 'inline', p: 2, m: 2}}
>
USA
</Box>
</Grid>
</Grid>
</Grid>
</Container>
)
}
Sandbox: https://stackblitz.com/edit/react-ts-srtlsp?file=Hello.tsx
I have values in different size which push the other values. Is it possible to have Strings in different size without pushing the other values?
Is there some better way to implement this functionality?
Well firstly I suggest you use tables instead of grids for this. But if you want to make this work, give a fixed width to your boxes like this:
<Box
component="div"
sx={{ display: 'inline-', p: 2, m: 2, width: 100 }}
>
Country 4323
</Box>
Now they will be inline , since there is a width set. Notice that the width should always be more than the content of what you are putting in the box.
I'm working on a prototype to migrate a JavaFx window to a a web application using React.js & Material Ui. The result must be as close as possible of the look&feel of the JavaFx application.
The layout of the windows was pretty basic, it looks like a form with multiple text fields to read or input data.
I've 2 main questions as I'm having some difficulties to match with the expected layout. I'm using Material Ui and some grid components.
First of all, how can I align the 3 left inputs fields (associated to AAAAAAA, FFF/FFF, HHHH so that the left borders of each input field are vertically aligned?
Then, I'm missing something in the Grid usage. I don't get why, on the 3rd line, there is a blank space between the first input field and IIII. I'm looking for a way to remove this blanck space, i thought the grid would only occupy the required space by the label & the input fields, but apparently some other blank spaces are added. I added the blue, yellow and orange background colors to have a better sight of what's happening. I was expecting the "yellow" block to end at the end of the "orange" block.
Below you can find a screenshot of my result and the associated code
Thanks for your help!
<Grid container direction={'column'} spacing={1}>
<Grid container item style={{width:"850px"}} >
<Grid container item xs={3} spacing={1}>
<Grid item>AAAAAAA</Grid>
<Grid item xs={7}>
<Input
inputProps={{ maxLength: 7, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid justify='flex-end' container item xs={8} spacing={1} >
<Grid item>BBBB</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>CCCC</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>DDDD</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>EEEE/E</Grid>
<Grid item item xs={2}>
<Input
inputProps={{ maxLength: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>/</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
<Grid container item style={{width:"850px"}}>
<Grid container item xs={6} spacing={1}>
<Grid item>FFF/FFF</Grid>
<Grid item xs={9}>
<Input
fullWidth="true"
inputProps={{ maxLength: 21, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid container item xs={6} spacing={1}>
<Grid item>GGGG</Grid>
<Grid item xs={10}>
<Input
fullWidth="true"
inputProps={{maxLength: 21, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
<Grid container item style={{border:"1px solid red", width:"1000px"}}>
<Grid container style={{backgroundColor: "yellow"}}spacing={1} xs={2}>
<Grid item style={{backgroundColor: "blue"}}>HHHH</Grid>
<Grid item style={{backgroundColor: "orange"}}>
<Input
fullWidth="true"
inputProps={{ maxLength: 4, size: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid container spacing={1} xs={2}>
<Grid item>IIII</Grid>
<Grid item>
<Input
fullWidth="true"
inputProps={{maxLength: 4, size: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
</Grid>
In order to center the items vertically, you should use the prop alignItems and give it the value center. For the second problem, I can't help you without any reproduction of the problem:
<Grid container direction={'column'} spacing={1}>
<Grid container item style={{width:"850px"}} >
<Grid container item xs={3} spacing={1} alignItems="center">
<Grid item>AAAAAAA</Grid>
<Grid item xs={7}>
<Input
inputProps={{ maxLength: 7, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid justify='flex-end' container item xs={8} spacing={1} alignItems="center">
<Grid item>BBBB</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>CCCC</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>DDDD</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>EEEE/E</Grid>
<Grid item item xs={2}>
<Input
inputProps={{ maxLength: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>/</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
<Grid container item style={{width:"850px"}}>
<Grid container item xs={6} spacing={1} alignItems="center">
<Grid item>FFF/FFF</Grid>
<Grid item xs={9}>
<Input
fullWidth="true"
inputProps={{ maxLength: 21, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid container item xs={6} spacing={1} alignItems="center">
<Grid item>GGGG</Grid>
<Grid item xs={10}>
<Input
fullWidth="true"
inputProps={{maxLength: 21, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
<Grid container item style={{border:"1px solid red", width:"1000px"}}>
<Grid container spacing={1} xs={2} alignItems="center">
<Grid item>HHHH</Grid>
<Grid item>
<Input
fullWidth="true"
inputProps={{ maxLength: 4, size: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid container spacing={1} xs={2} alignItems="center">
<Grid item>IIII</Grid>
<Grid item>
<Input
fullWidth="true"
inputProps={{maxLength: 4, size: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
</Grid>
I use react-rnd and material ui libraries
<Rnd
style={style}
minWidth={700}
minHeight={700}
size={{ width: props.size.width, height: props.size.height }}
position={{ x: props.size.x, y: props.size.y }}
onDragStop={props.onDragStop}
onResizeStop={props.onResizeStop}
>
<Paper
id="scrollable-paper"
style={{
width: "auto",
height: "100%",
overflow: "auto",
}}
>
{props.children}
</Paper>
</Rnd>
Child component
<Grid container spacing={1} style={{ width: "inherit" }}>
<Grid item xs={12}>
</Grid>
<Grid item xs={12} sm={12} md={4}>
</Grid>
<Grid item xs={12} sm={12} md={8}>
</Grid>
</Grid>
When I resize the component, the grid doesn't work. How can I fix this?