So imagine we want to have an image inside a TouchableOpacity button.
The image is slightly taller then the button and we want it to overflow. Currently the image gets clipped just before the top. I am debugging on Android.
How can I get an image to overflow a button in react native?
Use absolute position with image :
<TouchableOpacity>
<Text></Text>
<Image style={{position:'absolute', width:.., height:.., left:.., top:..}}/>
</TouchableOpacity>
Related
Solution for main issue: As vatsal said, the toggle button should be moved above the drawer, then we take the advantage of the open state of the drawer and change the left property of the button in the toggleButton class: left: props => (props.open ? ${drawerWidth - 30}px : '30px')
https://codesandbox.io/s/material-demo-forked-4neblr
Edit 2: Also, how can I prevent the drawer from pushing the appbar and main content?
I want the open state of the drawer to appear above them.
Edit 1: Here's a demo from material ui v4 page, with the issue I'm currently facing:
https://codesandbox.io/s/material-demo-forked-j9e96u
Hello
I'm using Material UI v4 and the drawer mini variant component,I have been trying to get the toggle button as the image below for two days without success:
Here's what I get:
Position absolute is not working, and when I add overflow:visible on the paper component that the drawer is using it, I get the first look but with an issue, where the links/buttons on the sidebar overflow:
It's driving me crazy, any help would be appreciated.
Thank you.
Moved
<IconButton className={classes.toggleButton} onClick={handleDrawerToggle}>
{open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
above drawer now you can add the conditional styles I have made the comment in toggleButton
CodeSandBox
I have a view with text inside it. I'd like the text to stretch and touch the edges of the view.
<View style={{backgroundColor: "lightblue"}}>
<Text style={{fontSize: 55}}>
{totalBalance}
</Text>
</View>
I've tried adding flex: 1, height:'100%', adjustsFontSizeToFit={true}, and includeFontPadding:false (although this seems to be android only, and I'm testing on IOS) to the text style, but none of these things have worked.
If I add backgroundColor: red to the text element, the background covers the whole view, but the font doesn't. This makes me think that the font might have some sort of padding?
Is there any way I can make the $0 in the image stretch to touch the edges of the blue view?
How can I fix this white line?enter image description here
If I make height:100% it looks so:enter image description here
In your main page component which contains all the components of your page like App.js
Add a Box element and add some styling in it.
<Box sx={{height:'100vh', background:'your_background'}}>
Your components
</Box>
I am attempting to make some buttons on a react application by using touchable opacity. However I am finding an issue when I try and size the button, for instance: when I set the width of the button, the entire left and right to the end of the screen remains clickable even though the button is a much smaller region. Same happens if I try and add a margin, it'll set the vertical click zone above and below the button clickable for that corresponding margin amount.
<View style={styles.button}>
<View style={[{backgroundColor: props.color}, {height: 100},
{width: "70%"}, {margin: 10}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
</View>
)
return<TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
By default every element has alignSelf set as 'stretch'. Add see if changing it to 'flex-start' helps.
<TouchableOpacity style={{alignSelf: 'flex-start'}}>
...
</TouchableOpacity>
If you are using react native version >= 0.63, then use Pressable component instead. It's more powerful, it provide hitSlop prop to adjust the pressable area of the button.
https://reactnative.dev/docs/pressable
I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels, I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.
I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.
I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.
Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.
I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.
If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.
Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
classes={{
flexContainerVertical: classes.flexContainerVertical // pass the class flexContainerVertical
}}
>
Then on your makeStyles:
const useStyles = makeStyles((theme) => ({
...
flexContainerVertical: {
display: "flex",
alignItems: "center",
}
}));
And Tab images will appear on center of the Tab.
Here your codesandbox modified.