I tried to code this thing. But the CardMedia will not go together with the checkbox. so responsive is a failure.
<Card>
<CardMedia
component='img'
alt=''
height='160'
image=''
title='Image'
style={{ backgroundColor: '#DEDBDB',
position: 'relative' }}
/>
{/*<input type='checkbox' id='select'*/}
{/* style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
{/*/>*/}
{/*<label htmlFor='select'*/}
{/* style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
{/*>選択</label>*/}
<Box mt={-6} ml={45}>
<span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
</Box>
</Card>
I tried also the FormControlLabel for this so that the label and checkbox will be together and style it with position: absolute and some margins so that the result will be like this.
But the problem is that it is not responsive and if using box label disappear.
Thanks.
Ciao, your problem is connected to the zIndex of the label in FormControlLabel. Infact, if you inspect the page you can see the label present on DOM but invisible (maybe because on CardMedia the image is always on top, but this is my personal opinion).
To solve this problem, you can override the style of the label associated to the FormControlLabel. This is a codesandbox example.
At first I defined a CustomCheckbox:
const CustomCheckbox = withStyles((theme) => ({
root: {
// checkbox style example
// color: "#000000"
// '&$checked': {
// color: "#000000",
// },
},
checked: {}
}))((props) => <Checkbox color="default" {...props} />);
Then, I used it into Card:
<Box mt={-6} ml={45}>
<span>
<FormControlLabel
control={
<CustomCheckbox
checked={cheboxChecked}
onChange={handleChange}
name="toggleFavorite"
/>
}
label="Checkbox label" // label value
classes={{
label: styles.formcontrollabel // label class overriding
}}
/>
</span>
</Box>
And finally in makeStyles I made the override:
const useStyles = makeStyles(() => ({
formcontrollabel: {
"&.MuiFormControlLabel-label": {
zIndex: 1
}
}
}));
The result is:
The label is responsive also (in this case "label" word goes on new line if you reduce screen width) as long as possible (if you continue to reduce screen width, label will be cutted). But this is normal (because you defined Box like <Box mt={-6} ml={45}>). If you don't like this behaviour, you could use a Hidden component to hidden checkbox and label if screen goes under a certain breakpoint like:
<Hidden smDown> // if screen width goes under smDown breakpoint, the Hidden content will be hided
...
</Hidden>
Related
I have a styled component like this:
const FormBox = styled(Box)(({ theme }) => ({
width: "47vw",
height: "25vh",
backgroundColor: theme.palette.grey[100],
borderRadius: theme.shape.borderRadius,
marginLeft: "auto",
marginRight: "auto",
marginTop: theme.spacing(5),
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: theme.spacing(2),
columnGap: theme.spacing(5),
"&>*": { flex: "0 1 auto" },
"&:nth-child(4)": { flex: "1 1 200px", backgroundColor: "red" }, //?????????????
}));
in the last line of code I targeted the 4th child(the button component in the bellow code) and I want to apply some CSS on it but it doesn't work.
and inside this styled component there are four child as bellow:
<FormBox component="form" noValidate autoComplete="off">
<TextField label="Title">{title}</TextField>
<TextField label="Amount">{amount}</TextField>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Date"
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => <TextField {...params} />}
sx={{ width: 50 }}
/>
</LocalizationProvider>
<Button variant="contained" sx={{height: 50}}>Add</Button>
</FormBox>
The & is a special selector invented by SCSS which is used in nested selectors to refer to the outer selector.
So the following code represents select the fourth FormBox element.
FormBox = {
"&:nth-child(4)": { // your style here },
}
If you want to select the fourth child element, please select all child elements of FormBox with >* first, then try to select the fourth child with :nth-child(4).
FormBox = {
"&>*:nth-child(4)": { // your style here },
}
By the way, &>:nth-child(4) can achieve the same effect.
The asterisk is optional with simple selectors. For instance, *.warning and .warning are equivalent.MDN
The following two links have more examples and may help you:
MDN/CSS_Selectors
w3schools/css_selectors
Please try with &>*:nth-child(4) instead of &:nth-child(4).
You can make sense from this link.
https://www.codegrepper.com/code-examples/css/css+selector+last+element
I've tried the process described in this question Trying to add linear gradient to a martialUI icon as a comment stated it should work, but it does not for me.
Thinking that maybe the icons counted as text, I've tried several of the ways to add gradients to text such as here: https://css-tricks.com/snippets/css/gradient-text/.
Yet I haven't gotten anything to work. The gradient either shows as a box image in the foreground, in front of the icon, or just not at all. Does anyone know how to add a gradient to Material UI icons?
EDIT: Forgot to post my code, here's the relevant snippet:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
drawerPaper: {
width: drawerWidth,
backgroundColor:muiTheme.palette.secondary.main
},
drawerContainer: {
overflow: 'auto',
background:muiTheme.palette.secondary.main
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
sideBarButton: {
fill: "#FFFFFF",
fontSize: "50px"
}
}));
const SideBar = (props) => {
const classes = useStyles();
return (
<MuiThemeProvider theme={muiTheme}>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<Box display="flex" flexDirection="column" padding="0" margin="0" >
<List>
<ListItem button>
<ListItemIcon> <SearchIcon className={classes.sideBarButton}/> </ListItemIcon>
<ListItemText/>
</ListItem>
<ListItem button>
<ListItemIcon> <AddCircleIcon className={classes.sideBarButton}/> </ListItemIcon>
<ListItemText/>
</ListItem>
</List>
</Box>
</div>
</Drawer>
</MuiThemeProvider>
)
}
More precisely, this is the list item (which is a material icon) I'm trying to add gradient to:
<ListItemIcon>
<SearchIcon className{classes.sideBarButton}/>
</ListItemIcon>
And this is the style applied:
sideBarButton: {
background: "linear-gradient(to right, #ad5389, #3c1053)",
fontSize: "50px"
}
The other methods I've tried per the links above:
// Just put the style in the tag, doesn't compile
<SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/>
Another method:
sideBarButton:{
background: "-webkit-linear-gradient(#eee, #333)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
fontSize: "50px"
}
Yet another method via https://fossheim.io/writing/posts/css-text-gradient/ :
sideBarButton:{
/* Create the gradient. */
backgroundImage: "linear-gradient(45deg, #f3ec78, #af4261)",
/* Set the background size and repeat properties. */
backgroundSize: "100%",
backgroundRepeat: "repeat",
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
MozBackgroundClip: "text",
MozTextFillColor: "transparent",
fontSize: "50px"
}
P.S. I'm just now learning React, I may very well be missing something simple. Please let me know if you need more info.
Here is an example using Material UI v5.
The fill property of the icon is linked to the linear gradient's id property.
import OpenWithIcon from "#material-ui/icons/OpenWith"
const GradientOpenWithIcon = () => (
<>
<svg width={0} height={0}>
<linearGradient id="linearColors" x1={1} y1={0} x2={1} y2={1}>
<stop offset={0} stopColor="rgba(241,184,74,1)" />
<stop offset={1} stopColor="rgba(207,113,8,1)" />
</linearGradient>
</svg>
<OpenWithIcon sx={{ fill: "url(#linearColors)" }} />
</>
)
How can I properly add dots the the title in my Cardheader if it exceeds the parents width (Card width). So far I have done this:
card: {
width: 275,
display: "flex"
},
overflowWithDots: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
width: '100px'
}
<Card className={classes.card}>
<CardHeader
title={
<Typography gutterBottom variant="h6" component="h4" className={classes.overflowWithDots}>
{movie.title}
</Typography>
}
/>
This works in a way, but I have to tell the class to have a width of 100px until it adds the dots. I need to add the dots if it exceeds the parents width.
Problem
As I understand it you are limiting the size of the Card, in this case, you are not being able to place the ellipsis due to the way the CardHeader is rendered in the html.
The CardHeader component is rendered with a "root" element and a "content" element. See below:
Typography has a built-in prop to adding dots noWrap. For the noWrap property to work correctly, we have the following approaches.
Solution 1
CardHeader's default behavior is to use flex. If you don't need it use flex:
...
cardHeader: {
display: "block",
overflow: "hidden"
}
...
<CardHeader
className={classes.cardHeader}
title={
<Typography noWrap gutterBottom variant="h6" component="h4">
A world wide web - the revolution
</Typography>
}
/>
...
Solution 2
If you need to keep CardHeader with flex behavior, in this case, the overflow needs to be applied to the root and content. To reach the elements use the CardHeader classes property passing the generated class to the content prop.
...
cardHeaderRoot: {
overflow: "hidden"
},
cardHeaderContent: {
overflow: "hidden"
}
...
<CardHeader
classes={{
root: classes.cardHeaderRoot,
content: classes.cardHeaderContent
}}
title={
<Typography noWrap gutterBottom variant="h6" component="h4">
A world wide web - the revolution
</Typography>
}
/>
...
Here's an example in the sandbox.
Atention
Be aware that by modifying the default behavior of how components are rendered, some side effects may occur in your entire component tree.
Anyway
If you still have any problems let us know.
Although this solution works, if you are using mui v5, this is how you can do it using the sx prop described here. You can set the .MuiCardHeader-content style and titleTypographyProps prop to style the title. I added an action button and subheader as an extra example.
import React from "react";
import { Card, CardHeader, IconButton } from "#mui/material";
import { MoreVert as MoreVertIcon } from "#mui/icons-material";
const SimpleCard = () => (
<Card sx={{ width: "275px", display: "flex" }}>
<CardHeader
sx={{
display: "flex",
overflow: "hidden",
"& .MuiCardHeader-content": {
overflow: "hidden"
}
}}
title={"A very long title coooooooooooooool"}
titleTypographyProps={{ noWrap: true }}
subheader={"ps long subheader cooooooooooooool"}
subheaderTypographyProps={{ noWrap: true }}
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
/>
</Card>
);
export default SimpleCard;
Here's the sandbox to mess around with.
Typography has a built-in prop to adding dots. You can simply add noWrap prop to Typography. It will add dots in header text and according to the parent component width.
<Card className={classes.card}>
<CardHeader
title={
<Typography gutterBottom noWrap variant="h6" component="h4">
{movie.title}
</Typography>
}
/>
/>
I have a CardHeader which has a dropdown within it, I use the to select various options for the table, however currently it looks awful and im not entirely sure how to style it in a more appropriate way, I am using material UI's framework to do this.
formControl: {
flexBasis: 'auto',
position: 'relative'
},
<CardHeader className={classes.cardHeader} classes={{ title: classes.cardHeader }}
avatar={
<Home />
}
action={
<FormControl className={classes.formControl}>
<InputLabel htmlFor="Available Contracts" style={{ marginRight: 20, color: 'white' }}>Contract Type</InputLabel>
<Select
value={contractType.contractObject}
onChange={handleChange}
inputProps={{
name: 'contractObject',
id: 'contractObject',
}}
>
<MenuItem value={10}>Local Contract</MenuItem>
<MenuItem value={20}>Framework Contract</MenuItem>
</Select>
</FormControl>
}
/>
A screen shot below of the table
As you can see the Contract Type is currently on the right, I would like this on the left next to the Home icon if possible, any ideas?
The 'Card' component has further sub components - 'CardHeader', 'CardContent'.
To style the CardHeader for instances, the API indicates that you can do the following:
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import {
Card, CardContent, CardHeader, Divider
} from '#material-ui/core';
const useStyles = makeStyles(theme => ({
action: {
margin: 0
}
}))
const CustomerInfoCards = ({ customer }) => {
const classes = useStyles();
return (
<Card>
<CardHeader
action={
<p>{customer._id}</p>
}
classes={{ action: classes.action }}
className={classes.action}
subheader={customer.email}
title={customer.name}
/>
<Divider />
<CardContent>
<h2>Some text</h2>
</CardContent>
</Card>
)
}
export default CustomerInfoCards
Main thing here is classes={{ action: classes.action }} - which removes the default margin top and right of 8px for the action prop.
Take a look at the API link above to know the various CSS exposed by material-ui and have fun styling!
In your styling for formControl add a new property flex and have its value as flex: "0 1 auto",
formControl: {
flexBasis: 'auto',
position: 'relative',
flexgrow: '1',
flex: '0 1 auto',
}
Hope this helps. flex usually adjust the component to relative right of the earlier component.
Read more: CSS flex on W3Schools
Using material-ui I am trying to make a <List /> inside of a <Grid /> column. I want the list to scroll on overflow but also take up the width of the grid it is in. I can get both of these to work but not at the same time. the first section with the <Grid /> is the overflowY functioning properly but without the full width of the <ListItem />:
const styles = theme => ({
root: {
flexGrow: 1,
},
list: {
flexGrow: 1,
position: 'absolute',
overflow: 'auto',
bottom: '1em',
top: '1em',
},
})
...
<Grid item xs>
<List classes={{ root: classes.list }}>
{genereateData(35).map(item => (
<ListItem button>
<ListItemText primary={item} />
</ListItem>
))}
</List>
</Grid>
...
<List classes={{ root: classes.root }}>
but if I switch the line to the last little bit of code above the full width part works. So why would the flexGrow: 1 work in the root prop but not the list prop, and is there a way to get both? I assume it has to do with position: absolute but I cannot get rid of that. Just looking for a way to get both.
Here is a codesandbox!