Material-UI: How to make aligned form - javascript

I'm new to Material-UI. How does one typically build a form, where some fields are grouped horizontally while others are stacked vertically and all the fields aligns nicely both vertically and horizontally? See the following example picture:
I know how to build this kind of form with plain HTML tables, but what is the "correct" Material-UI way? Example code would be nice.

Here you have a sample for the first two rows:
<form>
<Grid container>
<Grid item xs="12">
<TextField id="standard-basic" label="Standard"/>
</Grid>
</Grid>
<Grid container>
<Grid item xs="8">
<TextField id="standard-basic" label="Standard"/>
</Grid>
<Grid item xs="4">
<TextField id="standard-basic" label="Standard"/>
</Grid>
</Grid>
</form>

Related

MUI How to output text with Break Lines?

Every time I add content to the MUI Textfield it outputs it without any line breaks.
Is there a better solution to use?
<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
<TextField
name="Content" placeholder="Content" multiline={true}
value={content}
rows={18}
sx={{width: '100%'}}
onChange={(e) => setContent(e.target.value)}
/>
<div style={{maxWidth:"50%", paddingLeft:"10px"}} dangerouslySetInnerHTML={{__html: generateContent(content)}}></div>
</Stack>
Here's an example:
https://codesandbox.io/s/festive-dewdney-crxls
<Stack direction="row">
<TextField multiline value={state} onChange={handleChange} />
<Box sx={{ whiteSpace: "pre-wrap" }}>{state}</Box>
</Stack>
I used the whiteSpace: "pre-wrap" sx prop on the box where I am previewing the text, and I used the multiline prop on the textfield to make it a textarea input, and it worked.
I think the problem lies in your CSS and not in MUI. Use the white-space CSS property like this:
<div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: "pre-wrap"}}...
Read more about pre-wrap and the other values here
If this does not work then there are two similar questions but I doubt you will need them.
Best way to preserve new lines when I post data from a Multi Line Text Field
New line '\n' not recognized inside TextField in React

Ant Design: How to remove trailing end gutter on each Row

I am using antd's Row and Col components to create a responsive grid. However, when a column wraps underneath due to a breakpoint, there is some clear whitespace (pretty sure caused by gutters) at the end of the line above a shown bellow:
The textfields belong in one row, and the button in another. There is a gutter next to each text field that I want to get rid of so they properly fit the parent's width.
How would I go about doing that? Quick demonstration:
<Row>
<Col xs={{span: 24}}>
<Row>
<Col xs={{span: 24}} ...>
<Input/>
</Col>
<Col xs={{span: 24}} ...>
<Input/>
</Col>
<Col xs={{span: 24}} ...>
<DateRangerPicker/>
</Col>
</Row>
</Col>
<Col xs={{span: 24}}>
<Button/>
</Col>
</Row>
It has gutter attribute, but btw it is 0 by default!

Align text next to link vertical center in MaterialUI Grid

I'm having trouble trying to get the count aligned center vertically with the link
<Grid container justify="flex-end">
<Grid alignItems="center" className={styles} direction="row" item justify="center">
<Link className={classes.allCompanies} to="/companies">view all companies</Link>
{companyCount && <span className={classes.companyCount}>({companyCount})</span>}
</Grid>
</Grid>
the count span is showing bottom aligned with the link (at least it appears that way to me, it should be a little higher up):

Problem with Autocomplete from Material ui in ReactJS

I am trying to implement an autocomplete to show suggestions in an input field and save the selection in the state so I googled to look for an AutoComplete library and found one from MaterialUI but I can't seem to get it to work.
I get both an error and a warning and can't quite wrap my head around how to solve them.
here's my code
<div className="App">
<h1>Please Tell Diagnostica more medical info about you.</h1>
<Container className='Diagnosis'>
<Autocomplete
id="combo-box-demo"
options={this.state.uuidFeatures}
getOptionLabel={(feature) => feature.text}
value={this.state.inputValue}}
onChange={this.handleInputChange}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
</Container>
</div >

Align Material UI Grid Items of different length

I currently have a material ui grid system that looks like the following:
<>
<Typography gutterBottom variant='h6'>
Add New User{' '}
</Typography>
<Grid container spacing={3} alignItems='center' justify='center'>
<Grid item>
<Typography variant='body2'>Full name</Typography>
</Grid>
<Grid item>
<TextField
style={{ width: 400 }}
fullWidth
margin='dense'
id='outlined-basic'
label='Full name'
variant='outlined'
/>
</Grid>
</Grid>
<Grid container spacing={3} alignItems='center' justify='center'>
<Grid item>
<Typography variant='body2'>Email</Typography>
</Grid>
<Grid item>
<TextField
style={{ width: 400 }}
fullWidth
margin='dense'
id='outlined-basic'
label='Email'
variant='outlined'
/>
</Grid>
</Grid>
</>
I am noticing that because email and full name are different lengths, the grid items do not align in the way I would like them to. They currently look like the following:
I would like the grid to look like the following:
Is there a way to align the grid items like the bottom picture without needing to add a fixed width? that seems to be the only solution I have found but I feel like I'm missing something regarding the grid system.
attached is a code sandbox https://codesandbox.io/s/affectionate-bhabha-ur9nm?file=/src/App.js for debugging
I've added xs={9} for text-field and xs={3} for the label with style={{ textAlign: 'right' }}(not familiar with material-ui so don't know if there's a better way to apply this).
This is the result: https://codesandbox.io/s/hungry-euclid-n7y8f
you just need to add xs sm lg to your Grid component to take advantage of Auto layout. accoording to the doc:
The Auto-layout makes the items equitably share the available space.
after applying this change, your items will be aligned properly. you can also check the corrected version here in the sandbox.

Categories

Resources