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
/>
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>
Currently using this code of material-ui, the label is showing on the top-left corner of input, but what if I wanted to show the label outside of input separately. I know I can do this using the <InputLabel/> but is there any alternative that can done using <TextField/> only.
<TextField
id="username"
label={<Typography className={classes.label}>Username</Typography>}
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes: { input: classes.inputs },
}}
name="username"
autoComplete="username"
autoFocus
helperText={touched.username ? errors.username : ''}
error={touched.username && Boolean(errors.username)}
value={values.username}
variant="outlined"
onChange={handleChange}
/>
I used a Grid and InputLabel to be able to make what you want by manually implementing the label and define its position, I have something like this:
<Grid container >
<Grid item xs={12}>
<InputLabel
shrink={false}
htmlFor={"username"}
>
<Typography className={classes.label}>Username</Typography>
</InputLabel>
<TextField
id="username"
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes: { input: classes.inputs },
}}
name="username"
autoComplete="username"
autoFocus
helperText={touched.username ? errors.username : ''}
error={touched.username && Boolean(errors.username)}
value={values.username}
variant="outlined"
onChange={handleChange}
/>
</Grid>
</Grid>
I have a form displaying inside a modal component with several text inputs and select components but somehow the Select Labels are showing at the top left corner of the form. I followed the solution explained here but I am obtaining the same result. Another problem is that when clicking on one Select the other seems to be linked and show focused. I am not experienced with Material and I have been using it for a couple of days only. I really like it but I am a bit lost here. Also, the Select on the left is not aligned with the Text input.
This is the Dialog/Form code. Disregard the Select onChange event functions
{/* Modal Dialog to add the Form*/}
<Dialog maxWidth="100" open={createOpportunity} onClose={handleDialogClose}>
<DialogTitle align='center' id="form-dialog-title">Add New Opportunity</DialogTitle>
<FormControl className={classes.formMainClass}>
<div className='formDivs'>
<TextField autoFocus margin="dense" id="name" label="Opportunity Name" type="text" fullWidth/>
<TextField margin="dense" id="address" label="Address" type="text" fullWidth/>
<TextField margin="dense" id="city" label="City" type="text" fullWidth/>
<div className='state-zip'>
<InputLabel htmlFor="state">State</InputLabel>
<Select fullWidth inputProps={{id: "state"}} value={value} onChange={event => setValue(event.target.value)}>
<MenuItem value="">Empty Value for First Option</MenuItem>
<MenuItem value="Hey">Hey</MenuItem>
</Select>
<span> </span>
<TextField margin="dense" id="zip" label="Zip" type="text" fullWidth/>
</div>
<TextField margin="dense" id="architect" label="Architect" type="text" fullWidth/>
<TextField margin="dense" id="consultant" label="Consultant" type="text" fullWidth/>
<TextField margin="dense" id="duedate" label="Due date" type="date" fullWidth InputLabelProps={{shrink: true}}/>
</div>
<div className='formDivs'>
<InputLabel htmlFor="manager">Manager</InputLabel>
<Select fullWidth inputProps={{id: "manager"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<div className='state-zip'>
<InputLabel htmlFor="status">Status</InputLabel>
<Select fullWidth inputProps={{id: "status"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<span> </span>
<InputLabel htmlFor="source">Source</InputLabel>
<Select fullWidth inputProps={{id: "source"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
</div>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="description" label="Description" type="text" fullWidth/>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="notes" label="Notes" type="text" fullWidth/>
</div>
</FormControl>
<DialogContent>
<DialogContentText>Opportunities text.</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary">Cancel</Button>
<Button onClick={handleDialogClose} color="primary">Save</Button>
</DialogActions>
</Dialog>
Code for the Styling
.opportunities {
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
width: auto;
}
.top-buttons {
margin-top: 15px;
margin-bottom: 0;
width: 90%;
}
.formDivs {
width: 50%;
margin: 1% 3%;
}
.state-zip, .manager {
display: flex;
flex-direction: row;
}
Any advise, comment or suggestion is highly appreciated.
the issue is happening because you're using the FormControl element in the wrong way. This element is used to get extra control/feature/functionality over the individual form input.
So wrap your input elements with FormControl individually if you're planning to use FormControl functionalities and use div or form as a wrapping element instead of FormControl in your current code(form will be better).
Here is a related answer
Here is a working demo with the form tag :
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>
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>