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>
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 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 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;
I'm trying to achieve a two column layout, both of them equal height and each taking half of the screen. Picture explains it better, here is one.
The not working code is as follows:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import CssBaseline from "#material-ui/core/CssBaseline";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
alignItems: "stretch"
},
column: {
flexDirection: "column"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default props => {
const classes = useStyles();
return (
<>
<CssBaseline />
<Grid container className={classes.root}>
{/* COLUMN ONE */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>1: xs=6</Paper>
</Grid>
<Grid container item>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 left</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>1: xs=3 right</Paper>
</Grid>
</Grid>
</Grid>
{/* COLUMN TWO */}
<Grid container item className={classes.column}>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>2: xs=6</Paper>
</Grid>
</Grid>
</Grid>
</>
);
};
Obligatory codesandbox is here.
Could someone explain me what am I doing wrong here?
There's a bug with Material UI way of laying out nested grid containers, here. The workaround - found by #londonoliver - is to nest containers inside the grid items:
<Grid container direction="row">
<Grid item>
<Grid container direction="column">
<Grid item>1</Grid>
<Grid item>2</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>3</Grid>
<Grid item>4</Grid>
</Grid>
</Grid>
</Grid>