I'm trying to show more details and scale a component when hovered, but it displaces the surrounding components in doing so.
See screenshot:
Here's the sx I assigned to an MUI Box and Card.
const ctCardHoveredSx = {
maxWidth: 300,
'& .ct-card-toggle': {
display: 'none'
},
'&:hover .ct-card-toggle': {
display: 'flex'
},
'& .ct-card': {
transition: 'transform 0.15s ease-in-out',
boxShadow: 'none'
},
'&:hover .ct-card': {
transform: 'scale3d(1.25, 1.25, 1)',
boxShadow: '5',
zIndex: 2
}
};
Tech Stack:
NextJS
MUI
React
I think you need to use overflow hidden in the parent div and it will not displace the thing and hover will just get scale inside the same div.
Please let me know if you find any issues.
Related
I'm trying to create an animation of a spinning svg as a loader,
checking online I've seen some examples of doing it with Styled component, which is deprecated.
Been wondering if you guys have a suggestion?
I tried adding an '#keyframes spin' property to my SX but it didn't do anything, I.E:
<Box
sx={{
animation: '$test 1s linear infinite',
'#keyframes spin': {
from: {
transform: 'rotate(0dg)'
},
to: {
transform: 'rotate(360dg)'
}
}
}}
>
I tried creating an animation with SX property of MUI v5 with the same logic as Styled component
but failed :(
I wonder if we can achieve it without using a CSS file & a class...
With MUI5 it's works just fine when add keyframes on SX props
Here is my example
<Box sx={{
"#keyframes width-increase": {
"0%": {
width: "100px"
},
"100%": {
width: "300px"
}
},
width: "100px",
height: "50px",
backgroundColor: "red",
animation: "width-increase 1s ease infinite",
}}></Box>
Make sure you init keyframes before use.
Hope this will help you...
Stripe React elements' placeholders have an Opacity: 1 CSS property, that cannot be changed using the style object. Other ::placeholder CSS properties can be changed.
Style object:
const iframeStyles = {
base: {
color: "#276678", //$blue
fontSize: "30px",
lineHeight: "38px",
fontFamily: "Lato",
fontWeight: 400,
"::placeholder": {
color: "#C8D7DE", //$bluepastel
opacity: 0,
}
},
invalid: {
},
complete: {
}
};
Firefox inspect output:
I have tried !important, but it didn't work. The opacity prop just doesn't apply. Is there any workaround to solve this issue?
Stripe.js' styling api limits which css properties you can modify. You cannot set opacity. They probably don't want you to make anything disappear. The documentation lists which css properties you may override.
https://stripe.com/docs/js/appendix/style
You could try adding 00 to the color value instead. This will turn the color code to rgba, and the two last hex digits is the opacity of the color.
color: "#C8D7DE00", //$bluepastel (invisible)
if you are using card for Stripe in React Native so you can add this for Placeholder Color.
cardStyle={{
textColor: '#000000', // use this actual Text
placeholderColor: '#A9A9A9' // use this for Placeholder
}}
Full code for card Field.
<CardField
postalCodeEnabled={false}
placeholders={{
number: '4242 4242 4242 4242',
}}
cardStyle={{
textColor: '#000000', // use this actual Text
placeholderColor: '#A9A9A9' // use this for Placeholder
}}
style={{
width: '100%',
height: 50,
marginVertical: 30,
}}
onCardChange={cardDetails => {
fetchCardDetails(cardDetails)
}}
onFocus={focusedField => {
}}
/>
I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
I have a fairly complex application with multiple drawers. I'm having an issue with the right side drawer animations. The drawers themselves animate fine, but the parent divs do not. I tried applying the same animation for the drawer to the parent div and this did not solve my problem. I've replicated the issue in CodeSandbox. See below.
Example
Our specific use case is fairly complicated, but I think we've managed to find a fix. Essentially, we had to apply a transition to the <main> element and set its margin based on the state of the right toolbar. See below.
main: {
position: 'relative',
flex: 1,
height: '100%',
overflow: 'hidden',
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: -500,
},
mainRightOpen: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
}
and implemented like so...
<main
className={`${classes.main}
${this.props.rightToolBarOpen ? classes.mainRightOpen : null}
`}
ref={(mainContent) => { this.mainContent = mainContent; }}
>
Also, if you don't want the fixed margin value, you may consider to use percentage for the margin control, for instance:
// define the drawerWidth
const drawerWidth = 33.33333;
// put margin value as a string format like below:
content: {
flexGrow: 1,
padding: theme.spacing(6),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginRight: `${-drawerWidth}%`,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
},
Above solution works form me (Material-UI version I am using: v4.12.1)
My DOM is something like this:
wrapper
-element-container
--element (many)
---iconButton
Whenever an element is near the border of the element-container, the tooltip render is cut-off at the bounds of element-container.
How can I ensure tooltips always appear on top?
Here my current in-line styles:
element-container: {
paddingTop: '15px',
height: '65vh',
overflowY: 'scroll',
},
element: {
border: this.props.isSelected ? '4px solid #E71E61' : 'none',
boxSizing: 'content-box',
width: '300px',
transition: 'width 1.5s',
height: '500px',
margin: '15px',
position: 'relative',
},
iconButton: {
position: 'absolute',
marginTop: '-30px',
marginLeft: '-30px',
transform: this.state.isMouseOver === true ? 'scale(1,1)' : 'scale(0,0)',
transition: 'all .2s',
},
icon: {
height: '40px',
width: '40px'
},
I've tried:
setting the zIndex of both the tooltip (via the tooltipStyle prop of IconButton
changing the position of each element to different values (since this issue indicates position affects zIndex)
overwrting the entire tooltipStyle with the default style found in the MUI source code
ETA: Here's a screen shot of the issue I'm describing. My screenshot app doesn't capture the pointer, so I've drawn one to indicate that the mouse is over the grey circle button.
The cut-off tooltip is the dark box with the letters 'ing' visible. While this pic shows cut-off on the left side of the container, all sides behave the same.