I want to align text vertically inside flex container.I used following codes with aligncontent , justifycontent etc like below.
<Col
size={1}
style={{
padding: 10,
justifyContent: "center",
alignContent: "center",
backgroundColor: "orange",
borderRightColor: "#373738",
borderWidth: 1,
}}
>
<Text
style={{
flex: 1,
backgroundColor: "red",
fontSize: 14,
alignItems: "center",
textAlign: "center",
color: "#fff",
}}
>
{ago}
</Text>
</Col>
But none of them works , Please look below. Still the text is not aligned center vertically.
Try setting style in Text to be
display: flex;
align-items: center;
height: 100%;
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'm trying to learn how to write React Native apps and they're using Flexbox a lot to style their App screens. How can I achieve the following layout using Flexbox?
Here's the code I have so far:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#cde9ff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
},
header: {
borderWidth: 1,
fontSize: 38,
marginBottom: '50%',
},
form: {
borderWidth: 1,
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
backgroundColor: 'white',
color: 'black',
borderRadius: 10,
},
footer: {
borderWidth: 1,
},
});
I was trying to do it with the margins but that's not really working so well for me right now, and I figured it be best to properly learn to utilise Flexbox whenever I can.
Does someone know how to change my Stylesheet CSS to how I can easily create the quick paint image layout I made?
I would do something like this, and use flex-growth to push to footer at the end of the page
For the structure :
function App() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text>Title</Text>
</View>
<View style={styles.form}>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
</View>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</View>
);
}
For the CSS :
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
},
header: {
alignItems: "center",
width: "75%"
},
form: {
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
width: "75%",
flexGrow: 1
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: "black",
marginBottom: 10,
backgroundColor: "white",
color: "black",
borderRadius: 10
},
footer: {
alignItems: "center",
width: "50%"
},
});
codesanbox : https://codesandbox.io/embed/green-cloud-ne9yt?fontsize=14&hidenavigation=1&theme=dark
I think that you are looking for something like this:
HTML:
<div class="main-container">
<div class="title">
<h1> Title </h1>
</div>
<div class="form">
form
</div>
<div class="cta">
login
</div>
</div>
CSS:
.main-container{
height: 600px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center
}
.main-container div{
border: 1px solid black;
width: 300px;
padding: 50px
}
You have to add display flex to the parent container of the divs you want to be flexible
You can check Shahriar link: https://flexbox.malven.co/ it explains flex display pretty good
codepen: https://codepen.io/MichaeIMyers/pen/WNEJpLW
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I want to center the second piece of text. The first piece has an icon that takes up part of the width. The second text doesn't take up the full width of the screen, and so when I apply the textAlign to center, the text center should consider its width.
There is another text below the first that takes the full width, so it's really aligned in the center of the screen instead of being center relative the the first piece of text above it.
code:
<View style={{ marginBottom: 25 }}>
<View style={{ flex: 1, flexDirection: "row", alignItems: "center", marginTop: 15 }}>
<MaterialIcons onPress={() => console.log("funciona por favor!!")} name="close" size={20} style={{ color: "#FFF" }} />
<Text style={{ flex: 1, color: "#FFF", fontSize: 24, textAlign: "center" }}>Configurações</Text>
</View>
<Text style={{ color: COLORS.white1, fontSize: 24, marginTop: 0, alignSelf: "center" }}>Configurações</Text>
</View>
What I tried:
The icon has 30px of width, so I tried a negative value margin for the text and to center it, but it covers the icon, and this icon needs to be pressed, so the press doesn't work.
Thanks for the help, I hope I have been clear in exposing the problem.
You can add a margin to the right of the content to offset the amount the text it pushed from the right.
<View style={{ marginBottom: 25, backgroundColor: 'grey' }}>
<View style={{ flex: 1, flexDirection: "row", marginTop: 15 }}>
<MaterialIcons name="close" size={20} style={{ color: "#FFF" }} />
<Text style={{ flex: 1, color: "#FFF", fontSize: 24, textAlign: "center", marginRight: 20 }}>Configurações</Text>
</View>
<Text style={{ color: '#fff', fontSize: 24, marginTop: 0, alignSelf: "center" }}>Configurações</Text>
</View>
Make your button a grid:
div.button {
background:blue;
padding:4px;
color:white;
font-family:"Verdana";
width:50vw;
display:grid;
grid-template-columns: 5% auto 5%;
}
div.button div.caption {
text-align:center;
}
<div class="button">
<div class="left">ICON</div>
<div class="caption">Your caption here</div>
<div class="right"></div>
</div>
Using this approach, you define three columns, put your icon into the leftmost one, the caption into the middle one, and leave one column free which is as wide as the left one, making the center column actually being centered.
You wrap your close icon in absolute view and set the left position accordingly. In this way, your text will be aligned with the below text
<View style={{position:'absolute',left:0}}>
<MaterialIcons onPress={() => console.log("funciona por favor!!")} name="close"
size={20} style={{ color: "#FFF" }} />
</View>
I have:
<StyledSurface style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
{conversations.map((c, i) => (
<Surface style={{ backgroundColor: 'red', width: '46%', margin: '2%', flexDirection: 'column', flexShrink: 1, alignSelf: 'flex-start'}} key={i}>
<Text style={{flex: 1}}>{c.title}</Text>
</Surface>
))}
</StyledSurface>
and this ends up looking like:
But I want each red box to shrink (vertically) to fit the contents and have equal spacing?
What am I missing?
On the View container add this:
alignSelf: 'flex-start',
Should do the trick
Making a notification bubble for messages, but text is not centering.
Here is my code:
<View style = {{justifyContent: 'center', alignItems: 'center', position: 'absolute', top: -5, right: 10,
backgroundColor: 'red', height: h, width: w, borderRadius: br}}>
<Text style = {{fontSize: 10, color: 'white', textAlign: 'center'}}>
{'7'}
</Text>
</View>
And here is the result:
Result
Try alignSelf: center in your text style