I need to make a textfield with a responsive height so the height will always adjust itself to the size of the parent grid when the browser is minimized/maximized.
I looked up for a solution and I only found this:
Responsive MaterialUI TextField?
and it only gave me an idea about how to solve the same problem that I had with the width.
it didn't work with the height.
here is my code:
const useStyles = makeStyles({
infogrid: {
width: '30%',
height: '39%',
display: 'inline-block',
position: 'absolute',
right: '8%',
top: '10%',
backgroundColor: '#00ffff',
borderRadius: '5vh',
alignItems: 'center',
justifyContent: 'center',
justifyItems: 'center',
flexDirection: 'column',
overflow: 'auto'
},
label: {
margin: '25%',
marginTop: '0.3%',
marginBottom: '0.3%',
display: 'block',
height: '9%',
width: '50%',
}
})
export default function App() {
const classes = useStyles()
<Grid className={classes.infogrid}>
<TextField fullWidth className={classes.label} id="ovalID" label="1" variant="outlined" />
<TextField fullWidth className={classes.label} id="latitude" label="2" variant="outlined" />
<TextField fullWidth className={classes.label} id="longitude" label="3" variant="outlined" />
<TextField fullWidth className={classes.label} id="ovalRadius1" label="4" variant="outlined" />
<TextField fullWidth className={classes.label} id="ovalRadius2" label="5" variant="outlined" />
<TextField fullWidth className={classes.label} id="angel" label="6" variant="outlined" />
</Grid>
);
}
Just wrap everything inside your <Grid> with a <Stack> component.
Example
<Grid>
<Stack>
<TextField />
<TextField />
<TextField />
<TextField />
</Stack>
</Grid>
Should make your TextField height responsive in the grid items.
I just solved it by changing the parent grid into a div and changing the display setting of the div to 'flex'. Also, I set the marginTop and marginBottom settings in the 'labels' class to be a little bit higher.
As long as the parent div have the flex direction set to 'column'.
Related
I'm attempting to keep the icon button center aligned, but something isn't working right. Adding left: "0.5rem" to sx prop is pushing the button icon further. I'm trying not to use makeStyles to override the position. Any tip/direction would be helpful :)
Sandbox link
You can try using style:
<Stack direction="row" style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
<Tooltip title="Delete">
<Button sx={{ minWidth: 0 }} startIcon={<DeleteIcon />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
<Tooltip title="Send">
<Button sx={{ minWidth: 0 }} startIcon={<SendIcon />} />
</Tooltip>
<Tooltip title="Headset">
<Button sx={{ minWidth: 0 }} startIcon={<HeadsetMicOutlined />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
</Stack>
In case you want to set it in you theme here is how you can do it so you don't have to do it in every Button component.
export const theme = createTheme({
...
components: {
MuiButton: {
styleOverrides: {
startIcon: {
margin: '0'
},
},
}
},
});
I'm trying to make an input with an icon on the left. something like this:
I've already created the input. my plan is to add the input and icon in a grid. remove input's border and add it to the grid container.
I'm not able to remove the border. I've tried using the spread operator but I was getting errors.
there are other inputs using the same styles and they need the border.
How can I remove border for this input ?
const useStylesCustom = makeStyles((theme) => ({
root: {
border: '1px solid #e2e2e1',
overflow: 'hidden',
borderRadius: 2,
backgroundColor: '#fff',
transition: theme.transitions.create(['border-color', 'box-shadow']),
'&:hover': {
backgroundColor: '#fff',
},
'&$focused': {
backgroundColor: '#fff',
borderColor: '#DFDFDF',
},
'&$error': {
borderColor: theme.palette.error.main,
},
},
focused: {},
error: {},
}));
<Grid container>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
variant='filled'
value={lastName}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
onChange={(e) => setLastName(e.target.value)}
/>
</Grid>
</Grid>
You can remove the variant and no border will be displayed:
<Grid container style={{border: "1px solid black"}}>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
value={"lastName"}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
/>
</Grid>
</Grid>
Here is a sandbox.
I want to horizontally center Grid items inside a Grid container. Need some spacing between the Grid items as well. Please find the code below:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import { Container, Grid } from "#material-ui/core";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
topContainer: {
marginTop: theme.spacing(5),
},
}));
export const AddContact = () => {
const classes = useStyles();
return (
<Container fixed>
<Grid
container
spacing={3}
alignContent="center"
alignItems="center"
className={classes.topContainer}
>
<Grid item xs={4} style={{ border: "1px solid #ccc" }}>
<TextField id="name" label="Name" style={{ width: "100%" }} />
<TextField
id="userName"
label="User Name"
style={{ width: "100%" }}
/>
</Grid>
<Grid item xs={4} style={{ border: "1px solid #ccc" }}>
STEP 2
</Grid>
</Grid>
</Container>
);
};
The layout looks like below as of now.
The Grid items are not centrally aligned and there is no spacing between them as well. Could anyone please help me resolve.
Thanks
Instead of giving alignContent="center" provide justify="space-around" to the <Grid> container element. It'll align the items evenly and also separate them from each other according to the available space.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import { Container, Grid } from "#material-ui/core";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
topContainer: {
marginTop: theme.spacing(5),
},
}));
const AddContact = () => {
const classes = useStyles();
return (
<Container fixed>
<Grid
container
spacing={3}
// alignContent="center"
justify="space-around"
alignItems="center"
className={classes.topContainer}
>
<Grid item xs={4} style={{ border: "1px solid #ccc" }}>
<TextField id="name" label="Name" style={{ width: "100%" }} />
<TextField
id="userName"
label="User Name"
style={{ width: "100%" }}
/>
</Grid>
<Grid item xs={4} style={{ border: "1px solid #ccc" }}>
STEP 2
</Grid>
</Grid>
</Container>
);
};
export default AddContact
Here is the working sandbox link:- https://codesandbox.io/s/material-demo-forked-0sf86
You can try this also to play with grid alignment in #material-ui:- https://material-ui.com/components/grid/#interactive
Try something like this.
<Grid
container
spacing={2}
>
<Grid item md={4} lg={4}> </Grid>
<Grid item xs={12} sm={12} md={4} lg={4} style={{ border: "1px solid #ccc" }}>
<TextField id="name" label="Name" style={{ width: "100%" }} />
<TextField
id="userName"
label="User Name"
style={{ width: "100%" }}
/>
</Grid>
<Grid item xs={12} sm={12} md={4} lg={4} style={{ border: "1px solid #ccc" }}>
STEP 2
</Grid>
</Grid>
I have a ToggleButton
I want the selection to look like a button
But when I put a button inside I get such an error in the console
const StyledToggleButtonGroup = withStyles((theme) => ({
grouped: {
margin: theme.spacing(0.5),
border: 'none',
},
}))(ToggleButtonGroup);
<StyledToggleButtonGroup size="medium" value={problem} exclusive onChange={handleChange}>
<ToggleButton color="red" value="technical" className={helpClasses.boxButton}>
<Button size="medium" fullWidth color="primary" variant="outlined">
{t('help.technical')}
</Button>
</ToggleButton>
</StyledToggleButtonGroup>
<DialogActions>
error in console
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
I want it to look like this
From the documentation, https://material-ui.com/components/toggle-button/
It says, you can put icons inside ToggleButton, or most likely anything other than Button.
Try follow the doc,
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
I did it so
const classes = makeStyles((theme) => ({
boxToggleButton: {
borderRadius: '5px',
borderStyle: 'solid',
border: 1,
width: '6vw',
height: '6vw',
},
textToggleButton: {
color: colors.light.background,
fontWeight: 400,
fontSize: fontSizes.large,
},
}));
<ToggleButton value="Wrong identification ">
<Grid
container
justify="center"
alignItems="center"
item
className={classes.boxToggleButton}
>
<Typography className={classes.textToggleButton}>
{"wrongIdentification"}
</Typography>
</Grid>
</ToggleButton>;
The radio group is always vertical listed in material-ui. Is there a way to horizontally align them? e.g. all radio button in one horizontal line.
Simply use the row property:
<RadioGroup row><Radio /><Radio /></RadioGroup>
RadioGroup inherits from FormGroup so the properties of the FormGroup component are also available.
Another example, with labels:
<RadioGroup aria-label="anonymous" name="anonymous" value={false} row>
<FormControlLabel value="true" control={<Radio />} label="Yes" />
<FormControlLabel value="false" control={<Radio />} label="No" />
</RadioGroup>
To render the radio buttons in a row:
<RadioButtonGroup style={{ display: 'flex' }}>
To reset sizing according to content:
<RadioButton style={{ width: 'auto' }} />
Simply add the prop row={true} on the RadioGroup control.
<RadioGroup
aria-label="Location"
name="location"
className={classes.group}
value={location}
onChange={handleChange}
row={true}
>
<FormControlLabel value="company" control={<Radio />} label="Company" />
<FormControlLabel value="home" control={<Radio />} label="Home" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
For those who are still struggling, use this style:
const styles = theme => ({
group: {
width: 'auto',
height: 'auto',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'row',
}
});
class MyComponent extends React.Component {
render() {
const { classes } = this.props;
<RadioGroup className={classes.group} ...>
}
};
export default withStyles(styles)(MyComponent);
You just need to mention row in <RadioGroup>.
You can write your code like this:
<FormControl component="fieldset">
<FormLabel >Lable</FormLabel>
<RadioGroup aria-label="overall_sal" name="Overall SAL" value={value} onChange={handleChange} row>
<FormControlLabel value="low" control={<Radio />} label="Low" />
</RadioGroup>
</FormControl>
I cant comment yet, but to add to what #lambdakris said:
You may also need to add flexDirection: 'row'. The easiest way to make these changes instead of using the inline styles is to add your css to the styles object and class that material-ui already uses.
const styled = theme => ({
formControl: {
margin: theme.spacing.unit * 3,
width: "100%", //parent of radio group
},
group: {
flexDirection: 'row',
justifyContent: 'space-around',
}
});
...........
<RadioButtonGroup className={classes.group}>