I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?
Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.
Related
SO im using a MUI dialog, and MUI grid together. I took this code directly from the website. The only changes are the box wrapping the dialog, and the slight change in the dialog functions IE 'openDialog' instead of 'open'. No matter what size I change the dialog to, the grid items remain in a three-column layout, when at 'xs' for example, they should stack to 12. I have no idea why, the code looks right to me.
<Box sx={{flexGrow: 1}}>
<Dialog
fullWidth={fullWidth}
maxWidth={maxWidth}
open={openDialog}
onClose={handleCloseDialog}
>
<DialogTitle>Optional sizes</DialogTitle>
<DialogContent>
<DialogContentText>
You can set my maximum width and whether to adapt or not.
</DialogContentText>
<Box
noValidate
component="form"
sx={{
display: 'flex',
flexDirection: 'column',
m: 'auto',
width: 'fit-content',
}}
>
<FormControl sx={{ mt: 2, minWidth: 120 }}>
<InputLabel htmlFor="max-width">maxWidth</InputLabel>
<Select
autoFocus
value={maxWidth}
onChange={handleMaxWidthChange}
label="maxWidth"
inputProps={{
name: 'max-width',
id: 'max-width',
}}
>
<MenuItem value={false}>false</MenuItem>
<MenuItem value="xs">xs</MenuItem>
<MenuItem value="sm">sm</MenuItem>
<MenuItem value="md">md</MenuItem>
<MenuItem value="lg">lg</MenuItem>
<MenuItem value="xl">xl</MenuItem>
</Select>
</FormControl>
<FormControlLabel
sx={{ mt: 1 }}
control={
<Switch checked={fullWidth} onChange={handleFullWidthChange} />
}
label="Full width"
/>
</Box>
<Grid container>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid item xs={12} sm={4} md={4} key={index}>
<Item>xs=2</Item>
</Grid>
))}
</Grid>
</Box>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Close</Button>
</DialogActions>
</Dialog>
It seems that this is because the Grid is changing layout based on responsive breakpoints of the viewport, instead of the container width. In the posted code, the Grid should change to just 1 column when the window is actually resized below sm, which is 600px.
If the purpose is to mock the responsive sizes, perhaps for a demo, consider to have Grid take value on conditions calculated from the selected maxWidth and fullWidth, instead of the actual viewport width.
Minimized demo on: stackblitz (might need to view in new tab for changes).
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from(Array(6)).map((_, index) => {
const responsive = { xs: 12, sm: 4, md: 4, lg: 2, xl: 2 };
const selected = responsive[`${maxWidth}`] || 0;
const mockedResponsive = Object.keys(responsive).reduce(
(acc, cur) =>
!fullWidth
? {
...acc,
[cur]: Math.max(
responsive[cur],
Math.max(selected, responsive["md"])
),
}
: { ...acc, [cur]: Math.max(responsive[cur], selected) },
{}
);
return (
<Grid item key={index} {...mockedResponsive}>
<Typography>xs=2</Typography>
</Grid>
);
})}
</Grid>
When clicking on the Material Ui select it scrolls to top of the page every time within iframe.
I have created on react application which has select option for month and year. when i click on the select button it auto scrolls to the top of the page which is very annoying
This issue is occurring when i am loading react app within iframe only.
without iframe it is working fine
<Select
variant="outlined"
IconComponent={KeyboardArrowDown}
labelId="demo-simple-select-label"
style={{ marginRight: "10px", fontSize: Theme.typography.caption.fontSize}}
placeholder={Content?.expiryMonthPlaceHolder}
id="expirationMonth"
value={expirationMonth}
label="MM"
className={classes.cardmonth}
// expirationMonth ? classes.cardmonth : classes.cardmonthEmpty
// }
onChange={e => {
setExpirationMonth(e.target.value);
}}
>
{months.map(month => (
<MenuItem key={month} value={month} autoFocus={true} style={{ fontSize: Theme.typography.caption.fontSize }}>
{month}
</MenuItem>
))}
</Select>
I want to change the height of the datepicker and I have tried a lot of methods from sx to box style and none of them worked. I am wrapping it in a Box component for styling and when I inspect it in Dev tools, it says it's a Form component which makes sense. But changing the sx inside does not make any change too. I'm alright if the font size decreases, what should I do next to decrease the default height size?
code:
<Box
mt={1.6}
component="form"
sx={{
'& > :not(style)': {
m: 1,
width: '27ch',
height: 48,
backgroundColor: "white",
borderRadius: 1,
},
}}
noValidate
autoComplete="off"
>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Clear Date"
inputFormat="MM/dd/yyyy"
value={value}
onChange={handleChange}
renderInput={(params) =>
<TextField
{...params}
variant="standard"
size="small"
sx={{
px: 2,
}}
/>
}
/>
</LocalizationProvider>
</Box>
I'm trying to show adornments vertically in material ui Textfield but no luck. It's always positioned horizontally. Is there a way to show adornments vertically?
Code:
<TextField
variant="filled"
fullWidth
multiline
rowsMax={7}
onFocus={() => handleInputFocus({})}
onBlur={() => handleInputFocus({})}
InputProps={{
...(isSelected ? { endAdornment:
<InputAdornment position="start">
<Box mb={3}>
<SaveIcon color="primary" className={cursorStyle} onClick={() => deleteNote()} />
<DeleteIcon className={cursorStyle} onClick={() => deleteNote()} />
</Box>
</InputAdornment> }: {})
}}
/>
Actual Output:
Use display flex, try to add style={{ display: 'flex', flexDirection: 'column'}} in InputAdornment line as <InputAdornment position="start" style={{ display: 'flex', flexDirection: 'column'}}>
Then just fix your icon's style. Because probably they will be out of the box boundaries.
Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField
You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project