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.
Related
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
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>
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?
I'm learning using Material UI Grid and I want to add a blank column (like padding from the right of the first element) on the right side of a column without using padding.
Consider the code :
import React from 'react';
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from '#material-ui/core/styles';
const ExampleGridComponent = () => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
const classes = useStyles();
return (
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>)
}
export default ExampleGridComponent;
It look like this :
How can we put a blank column on the right of all the elements (brown color in the picture) ?
Wrap your item grids with row and column.
<Grid container spacing={3}>
<Grid item xs={9}>
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
</Grid>
</Grid>
Refer to:
Document of Material UI Grid
Nested grid items: issue
import React from "react";
import "./styles.css";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from "#material-ui/core/styles";
const App = () => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
const classes = useStyles();
return (
<>
<Grid container>
<Grid item xs={8}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid item xs={12}>
</Grid>
</Grid>
</Grid>
</>
);
};
export default App;