I am using Material UI dropdown in ReactJs and need to increase the width of the same. Tried to provide properties like style={{minWidth:300}} but its not increasing the width. Below is my code
<form className={classes.root} autoComplete="off">
<TextField
select
variant="outlined"
value={values.age}
onChange={handleChange}
inputProps={{ name: "age", id: "outlined-age-simple" }}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
</form>
and here is link of codeSandbox https://codesandbox.io/s/material-demo-t4cvv. How to increase the width?
User property style={{ width: value}} to set width
You can find the updated version of your fiddle here.
example:
<TextField
select
variant="outlined"
value={values.age}
onChange={handleChange}
style={{ width: 400}}
inputProps={{ name: "age", id: "outlined-age-simple" }}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
You can add CSS like:
.MuiSelect-root {
min-width: 300px;
}
If you have multiple dropdowns in the same component then you must use this CSS with its parent class.
Related
how can i remove to "border-left" of the first textfield and 'border-right' of the last textfield
<ButtonGroup variant="outlined" aria-label="outlined button group">
<TextField label="text" color="secondary" focused />
<TextField label="text" color="secondary" focused />
<TextField label="text" color="secondary" focused />
</ButtonGroup>
Use InputProps to apply class to TextField.
<ButtonGroup variant="outlined" aria-label="outlined button group">
<TextField
label="text"
color="secondary"
focused
InputProps={{
classes: {
notchedOutline: "left"
}
}}
/>
<TextField label="text" color="secondary" focused />
<TextField
label="text"
color="secondary"
focused
InputProps={{
classes: {
notchedOutline: "right"
}
}}
/>
</ButtonGroup>
Create CSS file and then import in your component.
CSS:
.left {
border-left: none !important;
}
.right {
border-right: none !important;
}
I am facing an issue of adding the slide animation on the question and answer. I want on click of the radio button the slide effect comes and next question comes with Slideup animation.
<Grid item xs={12} sm={8} md={8}>
<Slide direction="up"
in={checked}
appear={true}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000 , exit: checked ? 1 : 900}}
>
<Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
<CardContent>
<form onSubmit= {handleSubmit}>
<CardActions>
<Button type="submit" color="warning" variant="outlined" disabled={currentQuestion===0} className={classes.button} onClick={previousQuestion}>
Previous</Button>
</CardActions>
<FormControl component='fieldset' className={classes.formControl}
data-hidden={questions[currentQuestion].number !==
currentQuestion[questions[currentQuestion] .number]} >
<FormLabel component='legend'>
{questions[currentQuestion].question}
</FormLabel>
<FormLabel component='legend'>
{questions[currentQuestion].description}
</FormLabel>
<RadioGroup
aria-label='quiz'
name='quiz'
value={questions[currentQuestion].value}
checked={checked}
onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}>
{options.map((option) => (
<FormControlLabel
key={option.score}
value={option.score}
control={<Radio sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}/>}
label={option.label}
/>
))}
</RadioGroup>
</FormControl>
<CardActions>
<Button type="submit" variant="contained" color="primary" className={classes.button} disabled={currentQuestion != 5} onClick={handleSubmit}>
Submit
</Button>
</CardActions>
</form>
</CardContent>
</Card>
</Slide>
This is not working smoothly. So please help. The problem is on click of previous button the value disappeared. The slide effect is not flawless.
I'm using the react mui Select Component for forms and now for language select
my problem is for the language Select I need a different style for the dropdown I can do it by overriding the relevant class but the problem is it will happen to every Select and I want it only for the language Select as you can see in the photo:
and here my code:
const LanguagesSelect = props => {
return (
<Select className="test" classes="assad" style={{ position: "relative !important", left: "20px !important", top: "30px !important", width: "168.3px !important", background: "white !important", borderRadius:"12.75px" }} >
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<div style={{ display: "flex", width: "100%" }}>
<img src={require("../../../assets/img/icons/flags/franch.svg").default} />
<div style={{ marginLeft: "5px" }} >Franch</div>
</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/eng.svg").default} />
<div style={{ marginLeft: "5px" }}>English</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/turkish.svg").default} />
<div style={{ marginLeft: "5px" }}>Turkish</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/czech.svg").default} />
<div style={{ marginLeft: "5px" }}>Czech</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/hebrew.svg").default} />
<div style={{ marginLeft: "5px" }}>עברית</div>
</MenuItem>
</Select>
)
}
You can use the sx prop to override the default style.
here's a link for more description mui_sx_prop
You can give external css to the Select element and manipulate the child (MenuItem) from there.
I want to set the position of the dropdown element such that when I click on that it should remain in the same position and it should not move. As of now when I am clicking on the dropdown icon it is moving down. How can I fix this? I want that icon to stick to the input element and should not move up or down on clicking the icon.
Here's the code :
<Grid item md={6} lg={6} xs={12}>
<div className="milestone-due-date">
DUE DATE
</div>
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
</Grid>
<div className="milestone-due-date">
DUE DATE
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
</div>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
css
.milestone-due-date {position:relative;}label{position: absolute;bottom: -10px;left: 0px;}
Please see the image. The text is not aligning at the center of the text box like the other text box fields in the form
Drop down not at the center
Here is my code
<FormControl style={{ width: "80%" }} size="small">
<InputLabel
htmlFor="Implementation Status"
style={{ marginLeft: 10 }}
>
Implementation Status
</InputLabel>
<Select
labelId="Implementation Status"
name="name"
onChange={handleChange("Status")}
defaultValue={values.Status}
variant="outlined"
inputProps={{
id: "Implementation Status",
name: "age"
}}
>
<MenuItem value="Implemented">Implemented</MenuItem>
<MenuItem value="Implementation in Progress">
Implementation in Progress
</MenuItem>
<MenuItem value="Not Implemented">Not Implemented</MenuItem>
</Select>
</FormControl>
<br />
<br />
check this
import React from "react";
import "./styles.css";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import Select from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
export default function App() {
return (
<div className="App">
<FormControl style={{ width: "80%" }} size="small">
<InputLabel id="Implementation-Status" style={{ marginLeft: 10,top:"50%",transform:"translate(0,-50%" }}>
Implementation Status
</InputLabel>
<Select
labelId="Implementation-Status"
name="name"
variant="outlined"
inputProps={{
id: "Implementation Status",
name: "age"
}}
>
<MenuItem value="Implemented">Implemented</MenuItem>
<MenuItem value="Implementation in Progress">
Implementation in Progress
</MenuItem>
<MenuItem value="Not Implemented">Not Implemented</MenuItem>
</Select>
</FormControl>
</div>
);
}