Hi I want to make the element's direction to the right (row)
instead of going down(column)
width: '200px',
backgroundColor: '#fafafa',
border: "none",
borderRadius:'10px',
whiteSpace: 'nowrap',
textOverflow: `ellipsis`,
height:"20px",
overflow: 'hidden',
display:'flex',
flexDeriction:"row",
flexFlow:"row nowrap",
justifyContent: 'flex-end'
change justifyContent to alignItems with the same value
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
In this picture #1 is the regular border which I need to have. #2 and #3 are double the sizes of the #1. In the #4 we can see it happens because both nearby elements have borders and those aren't collapsed.
In my React / MUI project I have added borderCollapse: "collapse". But still, the problem is there.
This is my code sandbox
What went wrong in my code?
Each item in the Tabs gets it's own border that's why it looks double for the elements between.
The closest solution with the less code I could find is to add negative margin-left in each item except the first one like the code below. Here is the working codesandbox
<Tabs
value={value}
onChange={handleChange}
centered
variant="fullWidth"
aria-label="basic tabs example"
sx={{
".MuiButtonBase-root": {
color: "white",
textTransform: "none",
borderCollapse: "collapse",
border: "1px solid #83858E",
fontWeight: "normal",
marginLeft: "-1px" // You add negative margin
},
"& :first-child": {
borderTopLeftRadius: "0.5rem",
borderBottomLeftRadius: "0.5rem",
margin: "0" // You remove the negative margin-left for the first element.
},
"& :last-child": {
borderTopRightRadius: "0.5rem",
borderBottomRightRadius: "0.5rem"
},
"& .MuiTabs-indicator": {
display: "none"
},
"& .MuiTab-root.Mui-selected": {
color: "black",
backgroundColor: "#ABA9FF",
border: "1px solid white"
}
}}
>
I am working on a React Native App . The components are vertically center as I desire but are all aligned on the bottom and can't get them move up towards the top of the screen.
Please take a look at the layout screen (attached here).
How can I get them to move up top?
Please Note : The yellow color in the screen is to figure out how far the component's view stretches.
I could not figure out to adjust the 'yellow' view. The 'yellow' view is only suppose to consist the donut/menu button .
<View style={styles.container}>
<TouchableOpacity style={styles.drawerButton} onPress={() => this.props.navigation.openDrawer()} >
<Image
source={menu}
style={{width: 25, height: 25, marginLeft: 5}}
/>
</TouchableOpacity>
<TextInput style={styles.addText} placeholder="Add New Item"/>
<Button style = {styles.submitButton} title = "Add" />
<TouchableOpacity style = {styles.pictureButton} onPress = {this.setCameraWindow}>
<Text style={{fontSize:14}}> Take Picture </Text>
</TouchableOpacity>
{this.state.isCameraVisible ? this.takePicture() : null }
</View>
);
}
}
const styles = StyleSheet.create ({
container:{
flex:1,
flexDirection: 'column',
alignItems:'center',
flexGrow: 1,
justifyContent: 'center',
backgroundColor: 'blue'
},
drawerButton:{
flex:1,
flexDirection:'row',
alignSelf:'flex-start',
backgroundColor:'yellow'
},
menuButton: {
height:50,
flex:1,
flexDirection:'column',
alignSelf:'flex-start',
backgroundColor:'yellow',
},
addText:{
flex:1,
flexDirection:'column',
justifyContent:'center',
backgroundColor:'white',
borderBottomColor: 'black',
borderBottomWidth: 2,
alignSelf:'center',
maxHeight:50,
},
submitButton:{
justifyContent:'center'
},
pictureButton:{
backgroundColor:'white',
justifyContent: 'center',
},
});
Thank you
You have given flex:1 inside the style={styles.drawerButton}, thats why its taking up the entire space and other things are pushed to the end of the screen, please remove flex:1 from that, and also remove justifyContent: 'center' from container style. Then all the content will be moved to the top
These styles are what you need. Specifically:
overflow: hidden: Hides the yellow bit when the menu is collapsed.
position: absolute on the menu. This means the menu will appear in the same position regardless of the other content. Use top: 10px; left: 10px to control the actual positioning of the menu.
position: relative on the menu's parent (TouchableOpacity) element. This means the position: absolute of the menu will be relative to the parent element.
You may have to get rid of some of the other styles, at least temporarily, so you can see what is happening.
I'm having issues getting my background image to fill the screen, depending on the amount of page content. My app is made up of a main div and a side bar navigation. I have my background image styles set to the main div like so:
const styles = makeStyles(theme => ({
backgroundStyle: {
flexGrow: 1,
padding: theme.spacing(3),
height: '100vh',
textAlign: 'center',
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
[theme.breakpoints.down('md')]: {
height: '100%'
}
}
height: '100vh' works good until I select a navigation item that stretches beyond the view height, which cuts off the background image. Setting the height to height: '100%' fixes this but for a navigation item that doesn't have much content, the background image does not fill the entire screen. I having the same issues too when switching to a responsive view.
I set up a conditional to handle this:
return <main className={navListItem === 'Topic1' ? backgroundStyle : backgroundStyle2 }>
But it feels like I'm repeating myself because I'm creating another class called backgroundStyle2 that contains all the same styles only height is set to '100%' instead of '100vh'
I'm thinking there has to be an easier way to make the background image change depending on page the content besides using '100%' or '100vh' but I can't figure it out
If you want to have at least 100vh height but also to extend that height according to the content if the content's height is greater than the viewport height, you should use minHeight:100vh; height:100%
const styles = makeStyles(theme => ({
backgroundStyle: {
flexGrow: 1,
padding: theme.spacing(3),
height: '100%',
minHeight:'100vh',
textAlign: 'center',
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
[theme.breakpoints.down('md')]: {
height: '100%'
}
}
I have a view with an icon (from react-native-vector-icons) inside as following:
return (
<View style={styles.iconContainerStyle}>
<Icon name='menu' size={23} style={styles.iconStyle} />
</View>
);
The following is the styling for both the components:
const styles = {
iconContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
height: 30,
width: 35,
borderRadius: 5,
backgroundColor: '#ffffff',
padding: 2
},
iconStyle: {
color: '#2279b4',
}
};
The weird part is that the border radius prop of 5 should give evenly rounded borders, but this is what I get:
Notice that on the right hand side, the borders are sharper then the left part!
I even tried with different borderRaduis values, its still the same concept.
The header you see is provided by react-native-router-flex for my scenes, I think this is also a factor as their styles are also applied on the hamburger button.
A work around (temporarily) is by supplying another parent view with he following style:
<View style={{ justifyContent: 'center', alignItems: 'center', height: 35, width: 40, }}>
The height and width need to be a value bigger then that of the iconContainer.
Please add border: 1px solid #f00; to your code to see if toggle icon is not hidden behind something.
If it looks fine, try to add seperate radius to each angle, Like:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
and so on. Also, try to use border-radius styles with !important.