so, I am having ant-design card that needs a border radius, but if I add Inline CSS, it still not working, I also tried
And here is the follow code:
<Card style = {{width: 300, margin: "20px", borderRadius: "20px"}} actions = {[<h4 style = {{ paddingTop: "6px"}} key="Name">Table Name </h4>,]}></Card>
Is there any way I can control the border radius of this card?
Adding overflow:hidden with borderRadius to the card style will fix the issue of the actions container's corners not being round.
<Card
style={{
width: 300,
margin: "20px",
borderRadius: "20px",
overflow: "hidden"
}}
actions={[
<h4 style={{ paddingTop: "6px" }} key="Name">
Table Name{" "}
</h4>
]}
>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Card style={{ width: 300, margin: "20px", borderRadius: "20px", overflow: "hidden" }} actions={[ <h4 style={{ paddingTop: "6px" }} key="Name"> Table Name{" "} ]} > Card content Card content Card content
If you're using px within a style object you don't need to assign a unit measurement.
Just change borderRadius: "20px" to borderRadius: 20 - https://codesandbox.io/s/basic-card-antd-4-16-13-forked-jl9fv?file=/index.js
Would be good if ant-design had this in their API but it looks like they leave that up to you.
Related
I have the following code for a modal using Mui Modal.
Everything works except when I add more items to the cart. When this happens and the minHeight exceeds 500, it continues to 100vh and then stops and only shows 5 items, even if there are well over 5 items in the cart.
I gave the parent div overflow: auto, overflow: scroll, overflowY: scroll but it still doesn't work, any ideas?
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<div
style={{
minHeight: "500px",
width: "500px",
backgroundColor: "gray",
gap: "10px",
display: "flex",
flexDirection: "column",
overflowY: "scroll",
}}
>
{cart.map((displate) => {
return (
<Card
sx={{
height: "200px,
display: "flex",
padding: "10px",
gap: "10px",
backgroundColor: "black",
margin: "10px",
}}
>
<div
style={{
backgroundImage: `url(${displate.img})`,
backgroundSize: "cover",
backgroundPosition: "center",
height: "150px",
width: "120px",
}}
></div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
color: "white",
}}
>
<Typography>Name: {displate.name}</Typography>
<Typography>Size: {displate.size}</Typography>
<Typography>Finish: {displate.finish}</Typography>
<Typography>Frame: {displate.frame}</Typography>
<Typography>Quantity: {displate.quantity}</Typography>
</div>
</Card>
);
})}
</div>
</Modal>
The reason it wasn't working was because each card inside the map function didn't have a minHeight so they were just adjusting their heights to fit inside the container.
Adding both a maxHeight of 100vh to the parent container and a minHeight of 150px for each element fixed the issue
I have a modal that is supposed to pop up to show the status of a transaction going through on my website. It works fine other than the fact that the backdrop dimming effect is also applied on top of the modal. My modal is supposed to be white but it ends up being a sort of dark gray. I'm not sure what I'm doing wrong.
Here is the stying for the modal
const modalStyle = {
position: 'absolute' as 'absolute',
top: 0,
left: 0,
width: "80%",
marginLeft: "auto",
marginRight: "auto",
marginTop: "150px",
marginBottom: "150px",
bgcolor: 'white',
boxShadow: 24,
p: 3,
borderRadius: "25px"
}
And here is the HTML for it:
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
sx={modalStyle}
>
{!done ? (
<div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center" }}>
<h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Loading...</h1>
<Box style={{ display: 'flex', width: "300px", height: "300px", justifyContent: "center", }}>
<CircularProgress style={{ marginTop: "50px" }} size={150} />
</Box>
</div>) : (
<div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center", zIndex: "25" }}>
<h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Completed!</h1>
<svg className={styles.animatedCheck} viewBox="0 0 24 24">
<path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none" />
</svg>
</div>)}
</Modal>
I don't really know what is going wrong. It's weird because I use a very similar modal declaration at another point in my project and it works completely as expected.
The Modal component simply renders whatever children you pass to it in front of a backdrop component -- it's up to you to style the children. This issue is happening because, in your code, you're attempting to style the Modal root, not its children.
To fix it, wrap your content in another element onto which you can apply your styles and then move your modalStyle styling to that element. For my example, I wrapped them in a Box:
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={modalStyle}> {/* Moved here */}
...
</Box>
</Modal>
Which produced:
Working CodeSandbox: https://codesandbox.io/s/sad-christian-de6m9k?file=/demo.tsx
I have this component and I want to display the text with an ellipsis. I´ve tried different things but is not working. any Ideas are welcome!
<Card.Body style={{
display: "inline-block",
maxWidth: "100px",
maxHeight: "100px",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}} onClick={()=> UpdateDetails(player)}>
<Card.Title>{player.realName}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">
{player.playerName}
</Card.Subtitle>
<Card.Text>{player.asset}</Card.Text>
</Card.Body>
{/* <button onClick={()=> DeletePlayer(players.id)}>X</button> */}
</Card>
))}
I want to create a button in the shape of a circle in react. It works for big sizes (px > 100) but looks like an ellipse for smaller pixels.
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<Button style= {{
width:'10px',
height:'10px',
borderRadius:'50%',
fontSize:'10px',
color:'#fff',
lineHeight:'50px',
textAlign:'center',
background:'#000'
}}
variant="contained" color="secondary">
{"Theme nesting"}
</Button>
</ThemeProvider>
</React.Fragment>
);
This is what is looks like:
I know the CSS is correct, so what causes this behavior?
There are other CSS styles being applied to the Button from Material-UI (mainly padding: 6px 16px; and min-width: 64px).
This will display a black circle:
<ThemeProvider theme={theme}>
<Button
style={{
width: "10px",
height: "10px",
borderRadius: "50%",
fontSize: "10px",
color: "#fff",
lineHeight: "50px",
textAlign: "center",
background: "#000",
minWidth: "unset",
padding: "0"
}}
variant="contained"
color="secondary"
>
Theme nesting
</Button>
</ThemeProvider>
That said, a better alternative to using the style property would be to use their styling API for CSS overrides (like makeStyles with theming).
I'm using the MUI Card and CardMedia components in my app but can't figure out how to overlay text on top of the image. This is a simplified example of what I'm trying:
<Card>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
overlay: {
position: 'relative',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
I've tried placing the text div in above the CardMedia, below it, inside it, outside the Card entirely, and using different position values but can't figure this out at all. The beta versions of MUI included an overlay property on the CardMedia, but the v1 library doesn't seem to have anything like that.
Any know how to properly do this? Thanks in advance for any help!
Your CSS is off, you'll want to absolutely position the styles.overlay, and make sure the Card is position relative
Try something like this:
<Card style={styles.card}>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
card: {
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
Use the code below if you want to have an overlay like the Card in version 0. Remember to set the position of the container to relative so the absolute position of the overlay can take effect:
<Card sx={{ maxWidth: 345 }}>
<Box sx={{ position: 'relative' }}>
<CardMedia
component="img"
height="200"
image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
/>
<Box
sx={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
bgcolor: 'rgba(0, 0, 0, 0.54)',
color: 'white',
padding: '10px',
}}
>
<Typography variant="h5">Lizard</Typography>
<Typography variant="body2">Subtitle</Typography>
</Box>
</Box>
{...}
</Card>