I have the following code:
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<FormControl>
<TextField
label="email"
fullWidth
type="email"
value={email}
onChange={e => setEmail(e.target.value)}
></TextField>
<TextField
label="body"
type="body"
fullWidth
value={body}
onChange={e => setBody(e.target.value)}
multiline={true}
></TextField>
</FormControl>
</Grid>
And this renders:
The reason I'm using Grid is because I wanted to center the form, as suggested from the answers here.
No matter what I do, I can't get the TextField to change width. I've added it into a Container, I've added the width style, nothing works. What am I doing wrong here?
According to Material-UI TextField docs, fullWidth prop:
If true, the input will take up the full width of its container.
The TextField container in this case is FormControl, and the FormControl width is calculated to contain it's children.
If you set FormControl to fullWidth as well, you will get what you want:
<FormControl fullWidth>
Related
I have the following code for input with inputlable
<FormControl>
<InputLabel htmlFor="my-input">
Photo
</InputLabel>
<input
type="file"
/>
</FormControl>
What I see is
What I want is
I get this using:
<TextField
fullWidth
label="photo"
margin="dense"
accept="image/*"
type="file"
InputLabelProps={{
shrink: true,
}}
/>
So how can get this same effect using the previous code i.e using formcontrol, inputlable etc.
The reason i have to use that intead of textfield is react hook form: materail ui: Textfield: onSubmit, not passing Filelist in the data
Just set shrink property of InputLabel true and add a custom margin:
<FormControl>
<InputLabel shrink={true} htmlFor="my-input">
Photo
</InputLabel>
<input style={{ marginTop: "15px" }} type="file" />
</FormControl>
We are using OutlinedInput from Material UI, but text labels are not rendered. How to fix this?
import { Grid, OutlinedInput } from '#material-ui/core';
<Grid container>
<Grid item xs={12}>
<OutlinedInput
label="invisible label"
placeholder="HELLO, STACKOVERFLOW!"
value={value}
onChange={(e) => handleValueChange(e.target.value)}
fullWidth
/>
</Grid>
</Grid>
instead of expected "invisible label" text, an empty space is rendered (top left corner):
Like #Daniel L mentioned, you have to use the InputLabel component within the FormControl component, but in addition to his answer - I had to add a label attribute on my OutlinedInput component so that the outline on the input would not overlap with my label.
Code without the label attribute:
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor='display-name'>Display Name</InputLabel>
<OutlinedInput
id="display-name"
value={displayName}
onChange={(e) => handleInputChange(e)}
aria-describedby="base-name-helper-text"
inputProps={{
'aria-label': 'weight',
}}
/>
</FormControl>
Code WITH the label attribute:
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor='display-name'>Display Name</InputLabel>
<OutlinedInput
id="display-name"
value={displayName}
label='Display Name'
onChange={(e) => handleInputChange(e)}
aria-describedby="base-name-helper-text"
inputProps={{
'aria-label': 'weight',
}}
/>
</FormControl>
I don't think this component is meant to be used on its own. In the MUI docs, it is primarily used as augmentation for other components such as TextField
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
If you inspect the styles in dev tools, it looks like the CSS property visibility: hidden is causing this issue. In fact, if you remove that style, you will see that the label works.
However, if you have already built the majority of your app with this component and you need to show that label, just override it with MUI's styling solutions such as makeStyles. In addition, use notched prop to allocate space for it
const useStyles = makeStyles({
customInputLabel: {
"& legend": {
visibility: "visible"
}
}
});
export default function App() {
const classes = useStyles();
return (
<div className="App">
<Grid container>
<Grid item xs={12}>
<OutlinedInput
classes={{ notchedOutline: classes.customInputLabel }}
label="visible label"
placeholder="HELLO, STACKOVERFLOW!"
fullWidth
notched
/>
</Grid>
</Grid>
</div>
);
}
I had the same issue and I wrapped OutlinedInput into the FormControl element and attached InputLabe component as a label and that fixed my issue.
The quick answer to this is basically wrapping the component under a FormControl and adding an InputLabel on top of the OutlinedInput component.
Based on your code, it should look like this:
<Grid container>
<Grid item xs={12}>
<FormControl>
<InputLabel htmlFor="outlined-adornment">Some text</InputLabel>
<OutlinedInput
id="outlined-adornment"
placeholder="HELLO, STACKOVERFLOW!"
value={value}
onChange={(e) => handleValueChange(e.target.value)}
fullWidth
/>
</FormControl>
</Grid>
</Grid>
I'm trying to have an inline form, where the label is left to the control which doesn't seem to be default usage of various form components.
So far this does the trick:
<Grid container spacing={0}>
<Grid item xs={12}>
<FormControlLabel
label="ID"
disabled
value="42a5936e-9856-42d4-b540-104fd79bcf36"
labelPlacement="start"
control={
<TextField fullWidth name="ID" />
}
/>
</Grid>
</Grid>
But there is no space at all between the label and the control.
Here's what it looks like
I assume some padding-right has to be added to the label, but I'm not sure where I would put that using these components.
Add style to the props of TextField:
<Grid container spacing={0}>
<Grid item xs={12}>
<FormControlLabel
label="ID"
disabled
value="42a5936e-9856-42d4-b540-104fd79bcf36"
labelPlacement="start"
control={
<TextField
fullWidth
name="ID"
style={{ paddingLeft: '20px' }}
/>
}
/>
</Grid>
</Grid>
Alternatively, TextField takes a className prop for you to add classes to the components and style those classes.
To customize the Textfield input zone padding:
Use MUI nesting selector of className MuiInputBase-root
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
"& .MuiInputBase-root": {
paddingLeft: 10
}
}
}));
const classes = useStyles();
control={<TextField fullWidth name="ID" className={classes.root} />}
For inline style
Would this work for you?
<TextField
value="42a5936e-9856-42d4-b540-104fd79bcf36"
fullWidth
InputProps={{
startAdornment: (<InputAdornment position="start">ID</InputAdornment>)
}}
/>
hello i have a problem because, like you can see in the image, when i use react-select and textfiled with variant="outlined" because the label of the textfield shows itself even over the option, there is a class or something to solve this?
<TextField
variant="outlined"
label="First Name"
/>
thank you
I solved this with a zIndex on the <TextField:
<TextField
label="Points"
type="number"
min={1}
max={999}
value={props.question.value}
disabled={!props.question.expanded}
onChange={ev => props.updateValue(props.ix, ev.target.value)}
InputLabelProps={{
shrink: true,
}}
variant="outlined"
style={{ width: '5em', zIndex: -1 }}
margin="dense"
fullWidth
/>
https://codesandbox.io/s/material-demo-04y5b
Steps to reproduce:
Click "confirm" or "have a code?" to trigger a conditional render of a different form.
Click the "Confirmation Code" TextField.
Notice the border has rendered incorrectly and is causing the label to overlap with the border.
For correct behavior initialize newUser with a value other than Null and see that the border has rendered correctly to accommodate the label.
Any idea why this is happening?
<FormControl variant="outlined" className={classes.formControl} style={{ width: '100%' }}>
<InputLabel id="demo-simple-select-outlined-label-type">Package Type</InputLabel>
<Select
labelId="demo-simple-select-outlined-label-type"
id="demo-simple-select-outlined"
{...field}
required
label="Package Type"
className={classes.formControl}
>
<MenuItem value="chart">Chart</MenuItem>
<MenuItem value="email">Email</MenuItem>
<MenuItem value="social">Social</MenuItem>
</Select>
</FormControl>
Add label="Package Type" inside select
Thats work
A workaround that can solve it will be adding a key to the Textbox so you force it to render a new element:
<TextField
key="Confirmation Code"
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Confirmation Code"
name="email"
autoComplete="confirmation code"
/>
The workaround posted by CD above works - but this is indeed a bug.
More discussion, as well as other potential workarounds, can be found on the Github issue.
https://github.com/mui-org/material-ui/issues/16833
If you're here for a Select field, you can do it with the labelWidth prop on Select with the variant on the FormControl.
<FormControl variant="outlined" style={{ minWidth: 300 }}>
<InputLabel id="demo-simple-select-label">
Calendar to Add Event
</InputLabel>
<Select
labelWidth={150}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={value}
onChange={onChange}
fullWidth
>
{menuArray}
</Select>
</FormControl>