I want to have a Switch component without extra height, width, padding, margin
This is my Switch component
<Switch
checked={isSubscriptionStatusActive}
onChange={onHandleChangeSubscriptionStatus}
disabled={subscriptionStatus === 'deactive'}
aria-label="subscribption-status"
classes={{
root: classes.root,
bar: classes.bar,
}}
>
Here is it's styling
let style = {
root: {
display: 'inline-flex',
width: 0,
position: 'relative',
flexShrink: 0,
},
bar: {
borderRadius: 7,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
marginTop: -7,
left: '50%',
marginLeft: 0,
},
};
Steps to Reproduce (for bugs)
https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z
Material UI Issue Filed Here
https://github.com/mui-org/material-ui/issues/9587
Technically, Switch doesn't have any "extra" width or height. The whitespace around it is used to render the ripple.
You can disable the ripple with the disableRipple prop, and affect the Switch width as you've dicscovered, but digging into the source, unfortunately it isn't currently possible to pass props to SwitchBase which would be needed to affect the IconButton that is used for the switch "thumb".
You could perhaps modify your issue to discuss the posibility of submitting a PR to adress this limitation. We have xxxProps props on other components for similar purposes.
PS. You forgot to link from your issue to here, but I found it anyway. :)
Related
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.
I am using react native and currently have this css code for the navigator function code
<Tabs.Navigator
screenOptions={{
tabBarScrollEnabled: true,
tabBarShowLabel: false,
tabBarActiveTintColor: 'green',
tabBarStyle: {
backgroundColor: theme.backgroundColor,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
margin: 50,
maxHeight: 50,
borderRadius: 10,
justifyContent: 'center',
...style.shadow
}
}}
>
How do I style the active blue bar selector. I would ideally just want to change the color. What is the best way to go about this. I have tried using tabBarActiveTintColor with no luck.
What I want styled
Use the tabBarIndicatorStyle: { backgroundColor: 'green' }, to change bar color in version 6 :)
please do this
tabBarOptions={{ tabBarActiveTintColor:'blue' }}
It helps you lots.
I want to have a background image that takes all the screen and stays static when I scroll.
I have this component in a React Native project:
<ImageBackground` style={styles.backgroundImage}
source={require('../assets/images/Fondo1b.jpg')}>
....
</ImageBackground>
It is wrapping another components and it has this style:
backgroundImage: {
flex: 1,
resizeMode: 'cover',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
When I scroll up and down, it moves with the screen:
GIF link
In here you can see how it displaces with the scroll.
I need it to stay static occuping the size of the screen, not moving when I scroll and not displacing my FAB (it's Native Base's FAB, it that helps...)
Any tips, please?
Check this out. Need exactly this for React Native
https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314
<ImageBackground style={styles.backgroundImage}/>
backgroundImage: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
},
I've started out with Material-ui-next and have some problems with displaying images that they use the entire size of a container.
E.g. I use:
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550
}
});
In render:
<Card className={classes.Card}>
<CardMedia
className={classes.Media}
image={ImgPomodoR}
title="a pomodoro tomatoe timer in material design"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
...
The documentation says I have to specify a height for the image to get displayed. The 'media' example gives the image a height of 0, however, if I apply that my image is not getting displayed - mentioned example.
Right now, for me it's a trial and error of the Media-height, that it fits the Card container without being cropped.
Is there no 'auto' way of doing this?
Any help is highly appreciated,
cheers mates,
Tobias
Edit: I should mention that height: "100%" // maxHeight: "100%" does also not work for me.
I was having the same issue. Setting both width and height to '100%' worked for me.
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: '100%',
width: '100%'
}
});
However, if your images have different heights, this will cause cards to be different heights and most of the time that is not what you want. For that, you can specify a height and keep the width at '100%'.
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550,
width: '100%'
}
});
This will stretch the images to fit the container. For my case, I wanted part of the image to be shown without stretching the images. To achieve this, simply set the objectFit property to cover. This worked nicely for me.
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550,
width: '100%',
objectFit: 'cover'
}
});
Hope this helps someone,
I think it would work
const styles = theme => ({
card:{
backgroundColor: 'white',
marginBottom: 40,
},
media: {
height: 0,
// paddingTop: '56.25%', // 16:9,
paddingTop: '100%', // 1: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.