I have a MenuItem in my Dialog2 in my React app. I have a problem displaying the MenuItem. I already put a zIndex: 1900 that is higher than the two dialogs. How come it doesn't appear on the front. It is hiding still on the back of the dialogs?
Pls check my codesandbox here:
CLICK HERE
<DialogContent style={{ width: 300 }}>
<TextField variant="outlined" select label="Gender" fullWidth>
{genders.map((gender, index) => (
<MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
{gender}
</MenuItem>
))}
</TextField>
</DialogContent>
You've to target the Menu popover z-index
const useStyles = makeStyles({
customMenuPopover: {
// take note of !important because default z-index is applied inline
zIndex: "1900 !important"
}
});
<TextField
SelectProps={{
MenuProps: {
PopoverClasses: {
root: classes.customMenuPopover
}
}
}}
variant="outlined"
select
label="Gender"
fullWidth
>
{genders.map((gender, index) => (
<MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
{gender}
</MenuItem>
))}
</TextField>
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 have an MUI grid setup with a variable number of columns. Currently, if the user selects a long string for the Select box, the Select grows, increasing the size of the entire column. However, I want each column to remain the same size, no matter what is selected (and truncate what's in the Select box).
Please see the images below for a better understanding. In these examples, there are 8 columns:
Unfilled: empty fields
Filled: field filled, clearly the long text in the select box resized the whole column
Code:
{this.state.sampleData.map((obj, idx) => {
return (
<Grid item xs={true}> //Ensures the columns are the correct size (more columns = smaller widths).
<Grid container spacing={1}>
<Grid item xs={12}>
<Typography>#{obj["#"]}</Typography>
</Grid>
<Grid item xs={12}>
<TextField
className={classes.smallTextField}
inputProps={{
...
}}
variant="outlined"
label="Name"
name="name"
value={
this.state.sampleData[idx].name || ""
}
onChange={(event) => {
this.handleChange(
event.target.value,
idx,
"name"
);
}}
/>
</Grid>
<Grid item xs={12}>
<FormControl
variant="filled"
fullwidth
size="small"
className={classes.selectFieldFormControl}
>
<InputLabel
sx={{ ... }}
>
Position
</InputLabel>
<Select
sx={...}
name="position"
value={
this.state.sampleData[idx].position || ""
}
onChange={(event) => {
this.handleChange(
event.target.value,
idx,
"position"
);
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={"manager"}>
manager
</MenuItem>
<MenuItem value={"factory"}>
factory
</MenuItem>
<MenuItem value={"assistant to the regional manager"}>
assistant to the regional manager
</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
);})}
How can I get the box to truncate the text inside it so that the column does not get resized? I figure I'll need to add some style in either the Select box itself or the parent grid item.
Thanks!
I had the same problem, adding a maxWidth of 100% to the grid item that contains the select, and making the width of the select 100% solved it for me:
<Grid item xs={12} lg={4} sx={{ maxWidth: "100% !important" }}>
<h3 id="select-theme-label">Themes</h3>
<Select
id="select-theme"
sx={{ width: "100%" }}
></Select>
</Grid>
Or probably more realistically, adding the right maxWidth responsively:
sx={{ maxWidth: { xs: "100% !important", md: "28% !important" } }}
I have been trying to resize a select component from material UI. The problem that arrised was the fact that I could not resize the component properly with the help of the className property, the label was not in the right place and the selection shade height was greater than the one from the select box I resized (height: 24px). This is what i tried:
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Age"
className={classes.MuiSelect}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
And this was the makestyles I used:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
MuiSelect: {
width: "338px",
height: "24px"
}
}),
);
The link to the sandbox with the example: codesandbox
Finally, this was the result:
Box with the label in the wrong place
The shade of the selection is bigger than the actual box
As you have changed the size of the select element, you should also modify the .MuiInputLabel-outlined of the related InputLabel element, as well as the MuiSelect-outlined to fit the shadows of the select box to its width and height sandbox
First please add these outlined and selectOutlined objects to the useStyles
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
},
MuiSelect: {
width: "338px",
height: "24px"
},
outlined: {
transform: "translate(4px, 3px)"
},
selectOutlined: {
padding: "0px 14px"
}
})
);
And then add them to the InputLabel and Select elements
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
className={classes.outlined}
id="demo-simple-select-outlined-label"
>
Age
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Age"
classes={{
root: classes.MuiSelect,
outlined: classes.selectOutlined
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
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 am trying to make my card responsive to mobile applications
const styles = {
edit: {
width: "40%",
marginLeft: 270,
background: "#76ff03"
},
add: {
width: "100%",
background: "#18ffff",
size: "large"
},
root: {
minHeight: 210,
minWidth: 100
}
};
<Container maxWidth="md">
{/*marginTop:15*/}
<Typography component="div" style={{ borderColor:'#00c853' }}>
{/*style={{ height: '30vh' }}*/}
<Card style={styles.root}>
<Typography variant="overline" color="secondary" style={{fontFamily:'Roboto',margin:10}}>
All about your needs
</Typography>
<form onSubmit={this.validateItem} autoComplete='off'>
<TextField id="outlined-full-width" label="Input" style={{ width:'90%',marginTop:30 ,marginLeft:40 }}
placeholder="Add A Todo Item " margin="normal" InputLabelProps={{
shrink: true,
}} error={this.state.errorState} helperText={ this.state.errorState
&& "Item name can't be blank" } size="large" variant="outlined" value={newItem} onChange={handleInput} />
<Grid container justify='center' alignContent='center'>
<Grid item xs={12} md={6}>
{buttonChange()}
</Grid>
</Grid>
</form>
</Card>
</Typography>
</Container>
</div>
The above code is the user interface for the card component , i am trying to make the card component mobile responsive , but the interface i get instead is given below
The card and the text field should be able to be responsive to the screen size, but i am unable to make it work. Is there a way i can make it happen?
Hello and thank you for asking your question,
you can use the breakpoint of [theme.breakpoints.down("(XS, sm,md, lg, xl,)")] : {
maxWidth: 200 // you can change the size of your card component.
}
Here is a clearer example from the material ui Card component
Here is the component from the material UI Card component page, I only added the useTheme and useMediaQuery imports, and added a medium breakpoint inside useStyle under classes.root Here is a useful link on "useMediaQuery" https://material-ui.com/components/use-media-query/#usemediaquery
import { useTheme } from "#material-ui/styles";
import useMediaQuery from "#material-ui/core/useMediaQuery";
const useStyles = makeStyles(theme => ({
root: {
maxWidth: 345,
[theme.breakpoints.down("md")] : {
maxWidth: 200
}
},
media: {
height: 140
}
}));
const Card = () => {
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up("sm"));
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
Hope this helps