I was customizing a responsive drawer demo[below] so that main content is placed center in screen (not parent div) and it has maxWidth: 640px (just like podcasts.google.com). How would you do that?
Demo: https://codesandbox.io/s/mln3e?file=/demo.tsx
check attached Demo. I have forked your demo and updated.
Edit: updated the demo to make typography component in center of screen by ignoring the drawer width.
...
<Box
component="main"
sx={{
...
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center"
position: "absolute",
}}
>
<Toolbar />
<Box maxWidth="640px">
<Typography paragraph>
...
</Box>
...
Related
New to Material UI and flex I've read a lot of documentation but for some reason I'm missing how to take a Material UI <CancelIcon /> and align right only that icon in a <Drawer />. I've read that to be able to prevent the <Drawer /> from being inline I need to use flexDirection: 'column'.
Code
<Drawer
{...{
anchor: 'right',
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div className={drawerContainer}>
<CancelIcon className={cancelBtn} />
<GetDrawerChoices />
</div>
</Drawer>
Styles
import { makeStyles } from '#material-ui/core'
const useStyles = makeStyles({
drawerContainer: {
padding: '24px 0',
display: 'flex',
flexDirection: 'column',
},
cancelBtn: {
margin: '0 28px 8px 28px',
cursor: 'pointer',
// justify: 'flex-end',
alignContent: 'flex-end',
},
})
export default useStyles
Research
I've tried the following:
How to add close icon in Material UI Dialog Header top right corner:
cancelBtn: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
What's the right way to float right or left using the material-ui appbar with material-ui-next?
cancelBtn: {
display: 'flex',
flex: 1,
},
How to align a component to the center/right:
cancelBtn: {
justify: 'flex-end',
},
Further reading: Aligning Items in a Flex Container
Preview
In Material UI with flex how can I get the <CancelIcon /> to align right but leave the remaining text left justified?
You can use Box component outside the CancelBtn like this.
<Box
display="flex"
justifyContent="flex-end"
>
<CancelIcon className={cancelBtn} />
</Box>
Or like this.
<Box
display="flex"
>
<Box flexGrow={1} />
<CancelIcon className={cancelBtn} />
</Box>
hotcakedev's answer got me where I needed. Just cleaned it up:
bring in:
// Material UI
import { Box } from '#material-ui/core'
import CancelIcon from '#material-ui/icons/Cancel'
// Styles
import useStyles from '../styles'
const { drawerContainer, cancelBtn } = useStyles()
the div:
<div className={drawerContainer}>
<Box className={cancelBtn}>
<CancelIcon />
</Box>
<GetDrawerChoices />
</div>
and styles:
drawerContainer: {
padding: '24px 0',
display: 'flex',
flexDirection: 'column',
},
cancelBtn: {
margin: '0 20px 8px 0',
cursor: 'pointer',
display: 'flex',
justifyContent: 'flex-end',
},
if you want move only one element to right side you can use order in flex
cancelBtn: {
order : 1 // it moves just cancelBtn to the right side
};
I am working on jsPDF. I want to hide an element from displaying on browser but it should print as pdf using jsPDF anfd html2canvas.
<div>
id="divToPrint"
className="mt4"
style={{
backgroundColor: "#f5f5f5",
width: "210mm",
minHeight: "297mm",
marginLeft: "300px",
marginRight: "300px",
// visibility: "hidden",
</div>
How can I 'flex' my images so they resize to the screen size? There is too much space around the images when viewed using my iPad. I'd like the images to resize proportionate to the screen size.
I've tried adding a 'flex' value to each image, but they don't resize.
I'm trying to use 'flex'. How can I size the images to about 1/5 of the screen width?
<View
style={{
height: "30%",
flexDirection: "row",
backgroundColor: "red",
justifyContent: "space-between"
}}
>
<Image
source={require("../img/RGUC_Connect_logo.png")}
resizeMode="contain"
style={{
flex: 5,
height: undefined,
width: undefined
}}
/>
<Image
source={require("../img/logo.png")}
resizeMode="contain"
style={{
flex: 5,
height: undefined,
width: undefined,
}}
/>
</View>
I'm trying to run flex on a ScrollView, and as long as the ScrollView has flex: 1 the scroll inside does not work.
here is the expo fiddle (that you can run this code and play with)
https://snack.expo.io/SySerKNp-
note that if you remove the flex: 1 from the ScrollView it does let scroll but then you lose the flex power ( the ability to let the red container down to push up the upper box (the ScrollView) ) so I must have a flex there.
p.s - I'm working only on android, and I haven't tested it on iPhone( I don't mind the result there )
any idea what am I missing ? why the ScrollView won't function right when it has a flex: 1 ?
thanks !
Try using flexGrow: 1 instead of flex: 1 in scrollView content container style as follows.
<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box1} />
</ScrollView>
https://snack.expo.io/HkkEVoh6Z
I believe your problem is that you are telling the ScrollView to occupy all available space with flex=1 but the thing is that ScrollView works differently. It automatically renders all its children so it does work different with flex. That is the difference against a normal ListView or FlatList which have better performance.
I believe this snack solves that issue: https://snack.expo.io/SkxN9GOT-
Basically, I am getting the height of the device and setting the ScrollView with a fixed height, based on (screenHeight - the current height of the red box).
The best thing to do is to wrap your ScrollView in a View and control that view with flex, your scroll view will follow.
This is a little example
<View style={{flex: 1, flexDirection: 'column',}}>
<View style={{flex:5, backgroundColor : 'green' }}>
<ScrollView style={{margin:50, backgroundColor : 'pink' }}>
<Text> Hello Scroll View </Text>
<Text> Hello Scroll View </Text>
<Text> Hello Scroll View </Text>
<Text> Hello Scroll View </Text>
<Text> Hello Scroll View </Text>
<Text> Hello Scroll View </Text>
</ScrollView>
</View>
<View style={{flex:1, backgroundColor : 'blue' }}>
<Text> Hello Static View </Text>
</View>
</View>
This answer has already been provided how to do it.
But here's an explanation why you cannot do by your method. The styles given in contentContainerStyle is
applied to the scroll view content container which wraps all of the child views.
So when you apply flex: 1 to contentContainer it takes full height of ScrollView whose height is also flex: 1 as its parent View.
You can also simulate -
the ability to let the red container down to push up the upper box
by adding a parent to ScrollView and apply style in the parent
<View style={styles.root}>
<View style={{ flex: 1, borderColor: 'green', borderWidth: 5 }}>
<ScrollView>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box1} />
</ScrollView>
</View>
<View style={{ height: this.state.height, backgroundColor: 'red' }}>
<TouchableOpacity onPress={() => this.setState({ height: this.state.height + 10 })}>
<Text>Click</Text>
</TouchableOpacity>
</View>
</View>
Try this one it will 100% solve your problem
import React, { Component } from 'react';
import { AppRegistry, View,ScrollView } from 'react-native';
export default class AlignItemsBasics extends Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{ flex: 1,flexDirection: 'column' }}>
<View style={{ height: 50, backgroundColor: 'powderblue'}} />
<View style={{ flex: 1, backgroundColor: 'skyblue'}} >
<ScrollView>
<View style={{ flexDirection: 'column' , minHeight: 'fit-content'}} >
<View style={{ height:150, backgroundColor: 'red'}} />
<View style={{ minHeight: 'fit-content', backgroundColor: '#fe3222' }} />
<View style={{ height:150, backgroundColor: '#fff222'}} />
<View style={{ height:150, backgroundColor: '#555222'}} />
</View>
</ScrollView>
</View>
</View>
);
}
};
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
I was wondering there is a way I can align vertically in React Native. I'm trying to position on the bottom but I don't think I can find a good way to do it.
If anyone knows how to solve this issue, please let me know.
You can use the flex property, justifyContent to achieve this. Full documentation here.
<View style={{justifyContent: 'center'}}>
<Text>Vertically Centered Text</Text>
</View>
to align any content including text both horizontally and vertically, simply use the following in the container which holds it
container :{
justifyContent: 'center', //Centered horizontally
alignItems: 'center', //Centered vertically
flex:1
}
You can use an android-only style property textAlignVertical
To align text on top:
style={{textAlignVertical: 'top'}}
To align text on center:
style={{textAlignVertical: 'center'}}
To align text on bottom:
style={{textAlignVertical: 'bottom'}}
This problems occurs especially when you are using image or icon. I had a same problem my solution:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Icon type="MaterialCommunityIcons" name="barcode" />
<Text style={{ textAlign: 'center' }}>{urun_data.barkod}</Text>
</View>
I had a similar problem and looked at many of the other posts here. Here is what worked for me.
I created an initial view, and nested the elements I wanted vertically centered within that view. I made the mistake of including 'flex: 1' in the initial view, which screwed up the vertical alignment.
The code:
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text>Content here to be vertically aligned</Text>
<Switch>...</Switch>
</View>
RN version >= 0.55.2 is support to "textAlignVertical" now.
<TextInput
style={styles.text}
onChangeText={text => console.log('text >>>>>>>', text)}
value='sample text'
/>
text: {
textAlign: 'center',
textAlignVertical: 'center',
}
Working with both cases flex: 1 and set height of the <Text> component.
Text vertical center alignment summary
Case 1: There is only one Text under View
Ios: Use flex with alignItems/justifyContent to be more centered,
Adr: height = lineHeight, includeFontPadding: false more centered
Case 2: There are two Texts in a line view and the two Text fonts are different, and the Text with a smaller font size does not need to use the height.
The larger one is aligned using the above method. The smaller one can only be used with font-size, but not with the line-height and height attributes. In this case, both texts can be centered.
Case 3: There are two Texts in a line view and the two Text fonts are different, and the Text with a smaller font size must use the height.
The one with the larger font size is aligned using the above method, and the smaller font size uses height with padding and includeFontPadding to achieve alignment.
And Demo
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24
}}
>
测试
</Text>
<Text
style={{
fontSize: 24,
lineHeight: 36,
height: 36,
includeFontPadding: false
}}
>
测试
</Text>
</View>
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24
}}
>
ios设备
</Text>
<Text
style={{
fontSize: 16
}}
>
更对齐
</Text>
</View>
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24,
lineHeight: 36,
height: 36,
includeFontPadding: false
}}
>
安卓
</Text>
<Text
style={{
fontSize: 12,
height: 18,
includeFontPadding: false,
paddingVertical: 2,
paddingHorizontal: 1,
paddingTop: DeviceInfo.isIOS ? 3 : 2,
}}
>
更对齐
</Text>
</View>
The flex: 1 makes the child view take up all the remaining space in the parent view. So remember to make sure the parent is occupying the space it is supposed to.
I would advocate wrapping your content in a <SafeAreaView> tag so that is adjusts content to the device it is in. But you could use any other view type.
<SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Centered Text</Text>
</SafeAreaView>
flex: 1 makes the view take up the full width and heigh of the view its in
justifyContent: 'center' vertically centers the children
alignItems: 'center' horizontally centers the children
You can also use textAlign: center on the Text element and remove the alignItems: 'center'. This of course would only center the text in the Text object and wouldn't work if you had multiple elements that needed to be centered.
You can use flexbox with justifyContent: 'flex-end' to achieve vertical centering.
Here's a snack: https://snack.expo.io/#rynek/vertical-centering-with-flexbox-in-react-native
Here's a somewhat ugly solution to the problem. The ScrollView will take up the remaining vertical space, pushing the text down to the bottom.
<View>
<ScrollView>{}</ScrollView>
<Text>Your text</Text>
</View>
Or..
<View>
<View style={{ flex: 1 }}>{}</View>
<Text>Your text</Text>
</View>
use flex:1 property on both as on container of the Text component and itself inside the Text component.Because if u don't define the height and width its not working.
<View style={{
flex:1,
}} >
<Text style={{
flex:1,
color: COLORS.primary,
fontFamily: "FredokaOne-Regular",
fontSize:40,
textAlign:"center",
textAlignVertical:"center",
}}
numberOfLines={2} >
Travia War
</Text>
</View>
Simply use the alignItems for the vertical alignment
alignItems: 'flex-start' //for start the View : vertical-align: top
alignItems: 'flex-end' // for vertical-align: bottom
alignItems: 'center' // for vertical-align: middle
<View style={{ flexDirection: 'row', alignItems: 'flex-start'}}>
<View> <Text>hello 1</Text> </View>
<View> <Text>hello 2</Text> </View>
</View>
Check this example with changing of alignItems