What I'm trying to achieve
What I currently have
I'm trying to achieve the following using flex. What's the best approach to handle this?
I'm finding it difficult to separate the gap between the two text fields (text && secondaryText)
popper: createStyles({
root: {
backgroundColor: white,
borderRadius: 4,
boxShadow: "0 2px 12px 0 rgba(0, 0, 0, 0.5)",
zIndex: 1301,
maxHeight: 200,
overflowY: "auto",
display: "flex",
flexDirection: "column",
},
}),
};
<Popper
className={toClassName(classes.popper)}
>
{children} // Component AutocompleteSelection
</Popper>
const AutocompleteSelection: FC<AutocompleteSelectionProps> = ({
text,
secondaryText,
}): JSX.Element => {
const classes = useMakeStyles(baseStyles) as Properties;
return (
<ListItem styles={listItem}>
<Typography classes={classes.typography}>
{text}
{secondaryText}
</Typography>
</ListItem>
);
};
const baseStyles: Properties = {
listItem: createStyles({
root: {
"&:hover": {
backgroundColor: greyTwo,
},
},
}),
typography: createStyles({
root: {
fontSize: 14,
lineHeight: 1,
},
}),
};
Ciao, to display secondaryText floated right in a flex display, to could use marginLeft: "auto" in secondayText class like:
<Typography class={classes.typography}>
<Typography class={classes.text}>{"hello"}</Typography>
<Typography class={classes.secondaryText}>{"there"}</Typography>
</Typography>
And style:
const useStyles = makeStyles((theme) => ({
typography: {
display: "flex"
},
text: {},
secondaryText: {
marginLeft: "auto" // secondary text floated to right
}
}));
Here a codesandbox example.
Related
How do you align items to the left and the right in React Native?
Whatever combination of flexbox properties I try, the two sets of text are stuck next to each other like this:
How do you make it so "Sign In" is on the right side of the screen and Repositories on the left?
Here is my code:
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
flex: 1,
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
},
nesteddivright: {
flex: 1,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
},
scrollbar: {
display: 'flex',
justifyContent: 'space-between'
}
});
const AppBar = () => {
return <><View style={styles.container}>
<ScrollView style="scrollview" horizontal>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</ScrollView>
</View>
</>
};
export default AppBar;
App:
import Main from './src/components/Main'
import { StatusBar } from 'expo-status-bar';
import { NativeRouter } from 'react-router-native';
export default function App() {
return (
<>
<NativeRouter>
<Main/>
</NativeRouter>
<StatusBar style="auto" />
</>
);
}
As you can see, I have tried putting justify-content: space-between on the parent div and that does nothing.
I also tried this solution and it has done nothing: Aligning elements left, center and right in flexbox
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
display: "flex",
justifyContent: "space-between",
minWidth: '100%',
flexDirection: "row"
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
},
nesteddivright: {
},
scrollbar: {
}
});
const AppBar = () => {
return <><View style={styles.container}>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</View>
</>
};
export default AppBar;
Steps to solve issue:
Take out the scrollview component.
set Display to flex, justify Content to space-between, minWidth to 100% AND flex Direction to Row in parent component.
Not optimal as I need the Scrollview component in there as well, I will need to find a solution that allows me to have that component as a child.
I have a MUI Modal set up, it's currently working, however the backdrop is being displayed as black. I have styling in place, but for some reason the backdrop is not being updated and remains pitch black.
My code is below, a screenshot is also below of what I see when the Modal is opened. Please let me know how I can fix this issue.
import { Box, Modal, Typography } from "#material-ui/core";
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
modalStyle: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 300,
bgcolor: "background.paper",
boxShadow: 24,
p: 4,
backgroundColor: "white",
borderRadius: "10px",
},
}));
const PopupModal = ({ postModalOpen, handleClose, children }) => {
const classes = useStyles();
return (
<Modal open={postModalOpen} onClose={handleClose}>
<Box className={classes.modalStyle}>
ModalText
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
style={{
fontSize: "14px",
marginLeft: "5px",
}}
>
{children}
</Typography>
</Box>
</Modal>
);
};
export default PopupModal;
If you'd like to style the backdrop, your styles must be passed to the Modal component directly:
For example:
const useStyles = makeStyles((theme) => ({
/** Changed modalStyle */
modalStyle: { backgroundColor: "rgba(255, 0, 0, 0.5)" },
/** Moved content styling to new class */
contentStyle: {
/** Also removed some invalid attributes **/
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "300px",
backgroundColor: "white",
borderRadius: "10px"
}
}));
const PopupModal = ({ postModalOpen, handleClose, children }) => {
const classes = useStyles();
return (
// Note the changed className props with your sample code
<Modal
open={postModalOpen}
onClose={handleClose}
className={classes.modalStyle}
>
<Box className={classes.contentStyle}>
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
style={{
fontSize: "14px",
marginLeft: "5px"
}}
>
{children}
</Typography>
</Box>
</Modal>
);
};
Working Example: https://codesandbox.io/s/material-demo-forked-edhqx?file=/demo.js
FYI: You can also override all backdrops in your application, on a global scale, by passing a MuiBackdrop override object to createMuiTheme().
This is how I customized my MUI Backdrop (MUI v5)
<Backdrop open={isOpen} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.25)', zIndex: 1 }} onClick={handleCloseMenu} />
I have this project and I want to make a sidebar and inside the sidebar there are icons and a word that expresses this icon, the problem is that when I wanted to change the size of the icon in the “useStyles()” it didn’t change its size and I didn’t know why.
How can I solve this problem?
const useStyles = makeStyles((theme) => ({
item: {
display: "flex",
alignItems: "center",
marginBottom: theme.spacing(4),
[theme.breakpoints.up("sm")]: {
marginBottom: theme.spacing(3),
cursor: "pointer",
},
},
icon: {
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]:{
fontSize: "18px"
}
},
text: {
fontWeight: 500,
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
container: {
height: "100vh",
paddingTop: theme.spacing(2),
color: "white",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.up("sm")]:{
backgroundColor: 'white',
color: '#555',
border: '1px solid #ece7e7'
}
},
}));
const LeftBar = () => {
const classes = useStyles();
return (
<Container className={classes.container}>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
</Container>
);
};
export default LeftBar;
If you want a quick fix, give your icon the sx prop and put your desired font size there.
<Home sx={{fontSize:"18px"}}/>
Otherwise make sure that your import statements are correct.
... from "#mui/material/styles"
Usually I use the mui styled for breakpoints, so something like
const IconWrapper = styled("div")(({ theme }) => ({
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
fontSize: 18,
},
}));
Then implement it like
<IconWrapper>
<Home />
</IconWrapper>
I want to scroll on the background, when my dialog component opens up. By default, you cannot scroll when the dialog appears. How can I scroll in the background ?
Following is the Code:-
import React, { useState } from 'react';
import {
makeStyles,
Grid,
Button,
Dialog,
DialogActions,
DialogTitle,
} from '#material-ui/core';
import ShoppingCartIcon from '#material-ui/icons/ShoppingCart';
import CloseIcon from '#material-ui/icons/Close';
const styles = makeStyles((theme) => ({
root: {
position: 'fixed',
bottom: '0 ',
left: '0',
right: '0',
boxShadow: '0 0 6px rgb(0 0 0 / 70%)',
backgroundColor: 'white',
height: '63px',
},
textStyle: {
fontFamily: 'Comfortaa',
},
icon: {
color: theme.palette.primary.dark,
},
btn: {
backgroundColor: theme.palette.primary.dark,
color: 'white',
fontFamily: 'Comfortaa',
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
},
title: {
display: 'flex',
justifyContent: 'flex-end',
borderBottom: '1px solid #e5e5e5',
},
closeIcon: {
color: theme.palette.primary.light,
'&:hover': {
color: 'black',
},
},
dialogStyle: {
backgroundColor: 'white',
position: 'absolute',
top: 0,
},
dialogContainer: {
opacity: 0,
},
dialogTitle: {
display: 'flex',
justifyContent: 'flex-end',
borderBottom: '1px solid #e5e5e5',
},
}));
const CartAppBar: React.FC = () => {
const classes = styles();
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<Grid
item
container
direction='row'
justify='space-around'
alignItems='center'
className={classes.root}
xs={12}
>
<div>
<ShoppingCartIcon
fontSize='large'
classes={{ root: classes.icon }}
onClick={handleClickOpen}
/>
</div>
<div>
<Button
className={classes.btn}
type='submit'
onClick={() => {
return (window.location.href = '/checkout');
}}
>
Checkout
</Button>
</div>
</Grid>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby='alert-dialog-title'
aria-describedby='alert-dialog-description'
maxWidth='md'
fullWidth
classes={{
paper: classes.dialogStyle,
container: classes.dialogContainer,
}}
scroll='paper'
>
<DialogTitle className={classes.dialogTitle}>
<CloseIcon
onClick={handleClose}
classes={{ root: classes.closeIcon }}
/>
</DialogTitle>
{/* Footer */}
{/* <DialogActions className={classes.footer}>
<Button classes={{ root: classes.btn }}>Add To Cart</Button>
</DialogActions> */}
</Dialog>
</>
);
};
export default CartAppBar;
As you can see in the photo, there's opacity in the background and you cannot scroll. I want to override this and make the background scrollable
use disableScrollLock as prop will help
I'm having trouble trying to display a list of Views using flex with 100% height, the issue comes when it renders the list from Flat list, I might do something wrong with flex.
This is what I want: A Flat list with same height when scrolls I will go to another component
And this is What I am having a smashed List of all the rendered views
The flatList is just this :
<FlatList
pagingEnabled={true}
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
And the container from the Views I am rendering looks like this (css)
container: {
alignItems: 'center',
// TODO: check how why the screen is forguetting the tab, thats why I put the height like that
width: '100%',
height: '100%',
justifyContent: 'space-around',
flex: 1,
},
Use onLayout to get the height of the parent container and use that to set the height of FlatList items:
Example Output:
Full source code:
//import { List, ListItem } from 'react-native-elements';
import React, { useState } from 'react';
import {
Text,
View,
FlatList,
StyleSheet,
SafeAreaView,
StatusBar,
} from 'react-native';
const attendants = [
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 1,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '09/11/2020',
no: 2,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 3,
},
];
const App = () => {
const [data, setData] = useState(attendants);
const [layoutHeight, setHeight] = useState(100);
return (
<View style={styles.container}>
<View style={{ flex: 5 }}>
<FlatList
onLayout={(e) => {
setHeight(e.nativeEvent.layout.height);
console.log(e.nativeEvent.layout.height);
}}
style={{ flexGrow: 1, backgroundColor: 'pink', height: layoutHeight }}
data={data}
keyExtractor={(item) => item.no}
renderItem={({ item }) => (
<View
style={{
height: layoutHeight
}}>
<ListItem
customStyle={{ backgroundColor: 'black' }}
title={`${item.lecturer} ${item.courseName}`}
subtitle={item.students}
/>
</View>
)}
/>
</View>
<View
style={{
flex: 1,
backgroundColor: 'lightgreen',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={[styles.subtitle, { fontSize: 20 }]}>Bottom Bar</Text>
</View>
</View>
);
};
const ListItem = ({ title, subtitle, customStyle }) => {
return (
<View style={styles.listContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 30,
flex: 1,
},
listContainer: {
flex: 1,
backgroundColor: 'teal',
margin: 5,
paddingHorizontal: 5,
borderRadius: 4,
},
subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
title: {
fontSize: 14,
color: 'white',
fontWeight: 'bold',
textAlign: 'cetere',
},
});
export default App;
You can find the working app example here: Expo Snack
Flatlist is scrollview with many item inside and ScrollView content will calculator height of children render on it. So any item render on it need set height. height 100% will get height of parent and set for itself so you can not using height of scrollview content (infinity) and set for item inside.