Currently, my code looks like this.
HTML
return (
<Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}>
{children}
<div className={classes.box}>
<ul>
{props.pizzas?.toppings?.map((topping) => (
<li key={topping.id} className={classes.list}>{topping.name}</li>
))}
</ul>
</div>
</Card>
);
CSS
const useStyles = makeStyles((theme: Theme) => ({
root: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
padding: theme.spacing(2, 2, 2),
height: theme.typography.pxToRem(500),
'&:hover': {
cursor: 'pointer',
},
},
box: {
height: '300px',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
list: {
flex: '0 0 70px',
}
}));
My list looks like the below picture.
I want the list to wrap if there is space without overlapping each other, and if there is space at the bottom which there is right now to stack together if there are more toppings.
Thanks!
For anyone that runs into a similar problem this is how I solved it.
column1: {
columns: '1',
width: '300px',
},
column2: {
columns: '2',
width: '500px',
},
column4: {
columns: '5',
width: '800px',
},
I used columns
Related
on my mobile app, my text is wrapping as I would expect, but not on web.
Here is an example of one of the rows in my table:
<DataTable.Row style={styles.dataTableRow}>
<DataTable.Cell style={styles.dataTableCell}>
<View style={styles.tableRow}>
<View style={styles.tableColumn1}><Text style={styles.tableColumnText}>To register you as a new customer</Text></View>
<View style={styles.tableColumn2}><Text style={styles.tableColumnText}>(a) Identity (b) Contact</Text></View>
<View style={styles.tableColumn3}><Text style={styles.tableColumnText}>Performance of a contract with you</Text></View>
</View>
</DataTable.Cell>
</DataTable.Row>
And my styles:
dataTableRow: {
width: "100%",
},
dataTableCell: {
width: "100%",
},
tableRow: {
flexDirection: "row",
alignItems: "center",
},
tableColumn1: {
backgroundColor: colours.primary,
width: 300,
padding: 5,
},
tableColumn2: {
backgroundColor: colours.zettlePrimary,
width: 300,
padding: 5,
},
tableColumn3: {
backgroundColor: colours.status.rejected,
width: 600,
padding: 5,
},
tableColumnText: {
flexWrap: "wrap",
}
I normally wouldn't have all these elements/styles, but I have had trouble formatting this react-native-paper <DataTable>
I have used colours in this picture below just to highlight what is going on. And Like I mentioned, I have had no issue on mobile.
I have these balls that I want to join together. They should like stick together.
Code for the orange squares.
style={{
backgroundColor: 'orange',
display: 'flex',
borderRadius: width
}}
Code for the pink area.
bubbleViewWrapper: {
flexWrap: 'wrap',
backgroundColor: 'pink',
},
refer to image below as stack overflow doesn't allow me upload image
what does it look right now
https://ibb.co/T8L56ZF
What I want
https://ibb.co/5R4hLCV
Html structure
<ScrollView
horizontal={true}
contentContainerStyle={Style.contentContainerStyle}
showsHorizontalScrollIndicator={false}
>
<View style={Style.bubbleViewWrapper}>
{/ {BubbleStore.map((item, index) => { /}
{store.map((item, index) => {
More detailed version of Css
contentContainerStyle: {
height: CONTAINER_SIZE,
padding: wp(2),
paddingHorizontal: wp(4),
// backgroundColor: 'yellow'
},
bubbleViewWrapper: {
width: 'auto',
flexWrap: 'wrap',
alignSelf: 'flex-start',
backgroundColor: 'yellow',
},
circle: {
justifyContent: 'center',
alignItems: 'center',
borde
I have tried flex: wrap and some other properties but nothing seems to work.
I was using material-UI, but then I decided to migrate to MUI. Which I found was complicated change because.
Material UI format
import { makeStyles } from "#material-ui/core";
export const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
// alignItems: 'center',
width: '100%',
position: 'relative',
// backgroundColor: '#C2C2C2',
// marginTop: '700px',
height: theme.spacing(65)
// color: 'white',
// justifyContent: 'space-between'
},
}));
TO
MUI Format
import { makeStyles } from '#mui/styles';
import { styled } from '#mui/material/styles';
export const useStyles = () => ({
Root: styled('div')(({theme}) => ({
height: theme.spacing(10),
display: 'flex',
alignItems: 'center',
width: '100%',
position: 'relative',
color: 'white',
justifyContent: 'space-between',
[theme.breakpoints.down('xs')]: {
// justifyContent: 'center'
padding: '0 10px 0 10px'
}
})),
Logo: styled('div')(({theme}) => ({
display: 'flex',
alignItems: 'center',
gap: '1em',
letterSpacing: '0.5em',
"& h4": {
fontSize: '1.8em'
},
[theme.breakpoints.up('sm')]: {
marginLeft: '2em',
}
})),
})
Which is fine, but the problem is that earlier, I had some components like this.
<AnimeLogoWhite className={classes.logoIcon} />
Now, this component simply took the class logoIcon and applied it.
logoIcon: {
height: theme.spacing(6),
position: 'relative',
// iphone SE custom breakpoint
[theme.breakpoints.down(325)]: {
height: theme.spacing(5)
}
},
AnimeLogoWhite.tsx
import { FC } from 'react';
import whiteLogo from '../../../public/arkAnimeLogoWhite.svg';
interface Props {
className: string
}
export const AnimeLogoWhite: FC<Props> = ({className}) => {
return(
<img className={className} src={whiteLogo.src} alt='' />
)
}
I can't do this further with MUI.
Can anyone help me on how to achieve something similar?
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
I want my children look like this
not like this
Here is my code
//i use map to create list of children, i don't use flatlist or other lists due to some purpose
<Portal>
<Modal visible={visibleModal} onDismiss={hideModal} style={styles.modalFilter} contentContainerStyle={styles.contentModalFilter}>
{genres.map(genre => <Chip key={genre} onPress={() => console.log('Pressed')}>{genre}</Chip>)}
</Modal>
</Portal>
//css
const styles = StyleSheet.create({
modalFilter: {
alignItems: 'center',
justifyContent: 'center',
padding: 30,
},
contentModalFilter: {
backgroundColor: 'white',
width: '100%',
height: '100%',
padding: 20,
borderRadius: 15,
},
});
const styles = StyleSheet.create({
modalFilter: {
display: flex;
flexWrap: wrap;
alignItems: 'center',
justifyContent: 'center',
padding: 30,
},
contentModalFilter: {
backgroundColor: 'white',
width: calc(33% - 40),
height: '100%',
padding: 20,
borderRadius: 15,
},
});