This is the code I've used to make an icon position in the centre of the circular view with a background color:
import EEIcon from "react-native-vector-icons/Entypo";
<View
style={{
backgroundColor: "#F2F2F2",
alignItems: "center",
justifyContent: "center",
height: 25,
width: 25,
borderRadius: 12.5
}}
>
<EEIcon
name="location-pin"
style={{ color: "#fff", fontSize: 15 }}
/>
</View>
Give padding to icon from top and left ----
<EEIcon name="location-pin" style={{ color: "#fff", fontSize: 15, paddingTop:3, paddingLeft:2 }} />
Here is the working example
https://snack.expo.io/#msbot01/icon-center
In order for alignItem and justifyContent to work, display should be set to 'flex':
style={{
backgroundColor: "#F2F2F2",
alignItems: "center",
justifyContent: "center",
height: 25,
width: 25,
borderRadius: 12.5,
display:"flex"
}}
Related
I'm trying to make the pages responsive, Here is the code I have tried.
Code:
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
display: 'flex',
flexDirection: 'column',
alignItems: "center",
overflow: "hidden",
overflowY: "scroll",
}}
>
<Grid
container
direction="column"
alignItems="center"
>
<Grid item sx={{mt: 8, mb:7}}>
<CardMedia
component="img"
image="logo.png"
alt="logo"
sx={{
width: { xs: '80%', sm: '80%', md: '100%', lg: '100%', xl: '100%' }
}}
style={{ margin: '0 auto' }}
/>
</Grid>
</Grid>
<Grid container justifyContent="center">
<Grid item xs={11} sm={8} md={6} lg={5} xl={3.5}>
<Card
sx={{
backgroundColor: 'white',
borderRadius: '6px'
}}
>
<Box
sx={{mt:4, mb:5, mx:4}}
>
<Box>
<Stack
direction={"row"}
spacing={3}
>
<CardMedia>...</CardMedia>
<Box
sx={{wordWrap: "break-word", overflow: "hidden"}}
>
<Typography>
......
</Typography>
<Typography>
......
</Typography>
<Chip>...</Chip>
</Box>
</Stack>
</Box>
</Box>
</Card>
</Grid>
</Grid>
<Stack
direction="row"
alignItems="center"
justifyContent="center"
spacing={{xs: 3, sm: 4}}
sx={{ mt: 3, mb: 3 }}
>
<Button
variant="contained"
>
Button1
</Button>
<Button
variant="contained"
>
Button2
</Button>
</Stack>
</Box>
The question is how can I make my code conform to the figma specification? and it still be responsive. I'm so confused about how to add top: 188px, left: 653px those parameter to the mui Box or should I use percentage?
This is the figma layout.
I have a navbar that is suppose to align all the page options to the right. However, it does not do this. The entire toolbar is a flexbox and I've tried using alignSelf: end but this would only move the text slightly downwards.
I am not sure why it does this because the orientation I've chosen for the toolbar is row and not column.
I have tried removing the options that appear when the screen resizes but this did not work either.
Below is the code that is the issue. I've also commented as to which box is causing the issue. (comment labeled ISSUE)
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "flex-end" }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'black', display: 'block' }}
>
{page}
</Button>
))}
</Box>
The entire code:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import IconButton from '#mui/material/IconButton';
import Typography from '#mui/material/Typography';
import Menu from '#mui/material/Menu';
import MenuIcon from '#mui/icons-material/Menu';
import Container from '#mui/material/Container';
import Button from '#mui/material/Button';
import MenuItem from '#mui/material/MenuItem';
const pages = ['About', 'Projects', 'Contact'];
const NavBar = () => {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
return (
<AppBar position="static" sx={{backgroundColor: "blue"}}>
<Container maxWidth="xl">
<Toolbar disableGutters sx={{display: { xs: 'flex' }, flexDirection: "row", backgroundColor: "blue"}}>
{/* LOGO */}
<Typography
variant="h2"
noWrap
component="div"
color="black"
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
>
name
</Typography>
{/*Drawer - small screen */}
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none'} }}>
{/* Menu triple bar */}
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
{/* ABOUT, PROJECTS, CONTACT - small screen */}
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
{/* LOGO - small screen */}
<Typography
variant="h6"
noWrap
component="div"
color="black"
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
>
name
</Typography>
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "flex-end" }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'black', display: 'block' }}
>
{page}
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
export default NavBar;
You need to use justifyContent or justifySelf to move content on the main axis and alignContent and alignSelf to move content on cross axis, you were using the wrong CSS property since the main axis in this case is row. For more info. regarding flexbox axes please refer to this link
Let me simplify this for you.
The work around is fairly easy. The parent Container has two children "Logo/Typography" and "Box", you want the "Box" child to move at the end of the container, you just need to give parent (Toolbar) justifyContent: space-between property to make sure both children are at opposite ends.
Play around with the code here
<AppBar position="static" sx={{ backgroundColor: "blue" }}>
<Container maxWidth="xl">
<Toolbar
disableGutters
sx={{
display: { xs: "flex" },
flexDirection: "row",
backgroundColor: "blue",
justifyContent: "space-between"
}}
>
{/* LOGO */}
<Typography
variant="h2"
noWrap
component="div"
color="black"
sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
>
name
</Typography>
{/*Drawer - small screen */}
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
{/* Menu triple bar */}
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
{/* ABOUT, PROJECTS, CONTACT - small screen */}
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" }
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
{/* LOGO - small screen */}
<Typography
variant="h6"
noWrap
component="div"
color="black"
sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
>
name
</Typography>
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box
sx={{
display: { xs: "none", md: "flex" }
}}
>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: "black", display: "block" }}
>
{page}
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
I'm using an image and trying to position some text in front of the image and center, as seen in the screenshot from my design below:
I'm using the below code and found out how to layer the text over the top with z-index, but I'm wondering how I can center the text inside the parent div as seen in the design?
Code:
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `50%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
</div>
However, this gives me the text centered on the entire page i think? Perhaps due to the 50% top/left properties?
you should set a width to the parent div to see the difference in flex alignment.
See the code below.
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `10%`,
width: `80%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
As you can see i just changed the left and width parameters to get the expected result. I hope this will solve your problem
I have a problem building an UI.
I'm trying to copy this mockup found on dribbble.
I'm using React with Material UI and this is why I'm stuck:
I should have a kind of card with defined height (because there is another card of same height aside) with a first section of icon, title and a subtitle. Under this line it should be a grid layout with 2 rows and 3 columns that should define 6 equal containers with undefined and variable height and width and that's it
this is how my layout is shown at this point.
Now I should add the images of payment methods and I would like that it will behave like container remain of it's width and height and the image resizes and scale to fill the container (keeping its ratio) but when I try to add the images the MUI item grow to fit the content (image) growing its height. If you look at the last image you can see that the 1st row of the items is higher than the 2nd one. How can I fix that keeping the responsive layout?
Thank you all folks in advance.
Here is my code:
<Grid container md={5} xs={12} lg={6}
style={{
backgroundColor: "purple",
padding: 20,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Grid container xs={12} md={10} lg={10}
style={{
backgroundColor: "grey",
padding: 20
}}>
<Grid item xs={3} lg={3}
style={{
height: 120,
padding: 10,
backgroundColor: "black"
}}>
<div style={{ height: "100%", backgroundColor: "grey" }} />
{/* today I'm so beautiful (: */}
</Grid>
<Grid item xs={9} lg={9}
style={{
height: 120,
padding: 10,
backgroundColor: "black"
}}>
<div style={{ height: "100%", backgroundColor: "red" }} />
</Grid>
</Grid>
<Grid container xs={12} lg={10}
style={{
height: 200,
backgroundColor: "green",
padding: 5,
}}>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard}>
<img src={paypal} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard}>
<img src={visa} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard} >
<img src={mastercard} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard} >
<img src={wise} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard}>
<img src={stripe} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard} >
<img src={payoneer} style={styles.imgResponsive2} />
</div>
</Grid>
</Grid>
</Grid>
And here's the style:
const styles = {
imgResponsive1: {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "red",
padding: 20,
overflow: "hidden",
},
imgResponsive2: {
width: "100%",
height: "auto",
},
imgResponsive3: {
width: "100%",
height: "auto",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
center: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
paymentCardContainer: {
padding: 10,
backgroundColor: "blue"
},
paymentCard: {
height: "100%",
backgroundColor: "red",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
}
I am using FAB ( https://callstack.github.io/react-native-paper/fab.html#icon ) from react native paper library. I want to align button at bottom but it is overlapping with textInput field how can I place it below that textInput ? See screenshot below.
code:
//Inside return
<ScrollView>
<Text style={styles.title}>Add a Lead</Text>
<View style={styles.inputContainer}>
<Image source={require('../../assets/images/name.png')} style={{
marginTop: 15, width: 32, height: 32, resizeMode: 'contain'}}/>
<TextInput
placeholder='Name'
value={this.state.name}
style={styles.input}
onChangeText={ name => this.setState({name})}
error={this.state.nameError}
/>
</View>
<HelperText type="error" visible={this.state.emailError}>
{this.state.emailError}
</HelperText>
Similarly other items for phone email etc....
<View style={{marginTop: 20, flex: 1, flexDirection: 'row'}}>
<Image source={require('../../assets/images/comment.png')} style={{
marginTop: 20, width: 32, height: 32, resizeMode: 'contain'}}/>
<Text style={{marginTop: 25, marginLeft: 15}}>Comment</Text>
</View>
<View>
<TextInput
style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1}}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
error={this.state.commentError}
multiline = {true}
numberOfLines = {4}
/>
</View>
<FAB
style={styles.fab}
small
icon="arrow_forward"
onPress={this.handleCreateNewLead}
/>
</ScrollView>
css:
fab: {
position: 'absolute',
margin: 16,
right: 0,
bottom: -20,
},
Screenshot:
What it is currently looking like:
For textarea (which you placed the ? icon) added position:relative.
<TextInput style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1, position: relative}}
and change following style for fab component
fab: {
position: 'absolute',
margin: 16,
right: 10,
bottom: 10,
}
may it will works.
You need to wrap with View both of TextField and FAB component;
<View style={styles.container}>
<TextInput
style={styles.textField}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
error={this.state.commentError}
multiline={true}
numberOfLines={4}
/>
<FAB
style={styles.fab}
small
icon="arrow_forward"
onPress={this.handleCreateNewLead}
/>
</View>
and change your styles with these;
const styles={
container:{
flexDirection:"row",
alignItems:"center",
marginTop: 15
},
textField:{
flex:1,
height: 65,
borderColor: 'gray',
borderWidth: 1
},
fab: {
position:"absolute",
right:0,
},
};