I have something like this:
These are two different breakpoints. When container is stretched by form, map fills its container, but when flex changes direction to row it does not. How do I fix this without giving fixed value for map height?
I am using Chakra UI lib but it does not really matter, pure css solution is also fine.
<Stack mt="2" direction={{ base: 'column', md: 'row' }}>
<Box
flex={{ md: 1, sm: 1, lg: 2 }}
bg="white"
p="2"
shadow="sm"
borderRadius="4"
>
<CreateDeviceMap
zoom={10}
style={{ height: '100%' }}
center={[51.472829664858644, -0.06935119628906251]}
/>
</Box>
<Stack
flex="1"
bg="white"
shadow="sm"
p="4"
spacing="2"
borderRadius="4"
>
... form
</Stack>
</Stack>
UPDATE:
If I put height:100vh to container map shows and it is fine on small breakpoint but it destroys bigger breakpoints, they become streched. So I just need to find sweet spot between them.
Related
I ran into this issue where I have several Material UI Cards in a MUI Grid component. I would like the left side of this grid perfectly vertically aligned with the title above.
I tried putting a spacing={2} on the Grid container, but this causes that the padding of the Grid item also is on the left side, which makes it not aligned with the title above anymore. Is there a way to simply have this padding on the inside between the different Grid items?
<Box my={2}>
<Typography variant='h6'>
Hoeveel spaart u maandelijks tot uw pensioen?
</Typography>
</Box>
<Grid className={classes.scenarioBlock} container spacing={2}>
<Grid item xs={12} sm={6}>
<ScenarioOption selected {...monthlySavingGoal}>
<CustomSlider
onChange={
value =>
setAmounts(state => ({ ...state, monthlySavings: value }))
// should we check the scenario when they move the slider?
// if (!selected[name]) setSelected((state) => ({ ...state, [name]: true }));
}
color='primary'
value={amounts.monthlySavings}
min={monthlySavingGoal.sliderValues.min}
max={monthlySavingGoal.sliderValues.max}
step={monthlySavingGoal.sliderValues.step}
/>
</ScenarioOption>
</Grid></Grid>
As I recently ran into this problem as well, I want to share the solution I found.
In my case, the Grid container (and some other content, in your case the Box) were wrapped in an MUI Stack (for spacing purposes). This Stack was wrapped in an MUI Container (for horizontal centering). So my structure was:
<Container>
<Stack spacing={1}>
...some surrounding content that should be left-aligned
<Grid container spacing={2}>
...some Grid items
</Grid>
</Stack>
</Container>
I solved the indentation/misalignment by simply wrapping the Grid container in any other element, the most trivial example being a div element. Someone with more advanced MUI knowledge can possibly give a better explanation to why this makes the difference. So afterwards, my code looked like:
<Container>
<Stack spacing={1}>
...some surrounding content that is left-aligned to the Grid below
<div>
<Grid container spacing={2}>
...some Grid items
</Grid>
</div>
</Stack>
</Container>
And by that my Grid was (horizontally) aligned to the surrounding content. Hope this helps! If I stumble upon the explanation, I will add it to this answer.
By default material ui will add a gutter for the Grid item component, you just need to modify the grid component and add some style or class prop that removes the padding:
// Rest of the code
<Grid item xs={12} sm={6} style={{padding: 0}}>
</Grid>
You could also use a custom className using material UI makeStyles and just apply the class to the Grid item component.
const useStyles = makeStyles(() => ({
item: {
padding: 0,
},
}))
And in your component:
const classes = useStyles()
return (
{/* Rest of the code*/}
<Grid
item
xs={12}
sm={6}
classes={{
// Here's the override with your custom item class.
item: classes.item,
}}
>
</Grid>
)
I am trying to understand why the below layouts work differently.
Can someone explain how the internal layout process happen, in terms of rules? And why below examples behave differently. Except just saying that this is how it is.
Example1:
return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
)
This renders the red box around the black box around the Text. Which means that View resizes based on its content. inner view resizes to consider the text, outer view considers inner view(which already has considered inner text to determine its dimensions), hence everything is as expected.
Example2:
return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
)
The text now comes outside both the Views. The inner view still rests inside the outer view though.
Now i tried a little different variation:
Example3:
return <View style = {{borderWidth:1, borderColor:'red', height:10}}>
<View style = {{flex:1, borderWidth:1, borderColor:'black'}}>
<Text>HelloWorld</Text>
</View>
</View>
This one renders a little better, i.e the text atleast seems to start inside both the views. But still not as expected.
Questions i have:
1) in case #2 above, Why does the text flow outside both the views? Whereas inner View still stays inside outer?
Can some content ever go beyond the bounds of its parent View? Shouldn't the parent View expand to contain it, as long as we haven't provided specific dimensions to it?
2)In case #3, things behave a little bit as expected..Text is inside the views somewhat, but still overflows..
3)How does this rendering happen in ReactNative internally & how does it determine the effective heights of these views above?
Example with flex
flex: 1, obligates child to follow parent's height, "Black view" will fill all the space available of the "Red view", which is height:60.
<View style={{ borderColor: "red", height: 60 }}>
<View style={{ borderColor: "black", flex: 1 }}>
<Text>HelloWorld</Text>
...
</View>
</View>
Example without flex:1
Here without flex, "Black view" will occupy all space of its children, it won't matter height of the parent ("Red view").
<View style={{ borderColor: "red", height: 60 }}>
<View style={{ borderColor: "black" }}>
<Text>HelloWorld</Text>
...
</View>
</View>
The thing is in simple terms the outline misbehaves in case of 2nd one , i.e :
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
Is because the parent View component doesnt have a flex property so it doesnt take up whole the space and since you have added flex:1 in the child View it tries to take up as whole space as its alloted , hence black border Dominates and TestText is below it.
But if you provide flex:1 , to parent View you will see the same structure as it was with no flex given at all. Try :
<View style = {{flex:1,borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
Hope it helps . feel free for doubts
I am using Material ui Grid to arrange my ui elements. Below is my code
<Grid container spacing={3}>
<Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRight: '1%' }}>
<Grid item xs={7} sm={7} md={7}>
<label className={classes.title}> Title </label>
</Grid>
<Grid item xs={5} sm={5} md={5}>
<label style = {{marginLeft: '25%'}}> Lable 1 </label>
<label> Lable 2 </label>
</Grid>
</Grid>
Now, as per the above code, i want to make design responsive based on screen sizes and add breakpoints, how can i achieve it? Also, is there any way to handle the browser resolution/zoom, my design goes to horizontal scroll with bigger zoom.
To make this work import
import {createMuiTheme,ThemeProvider} from "#material-ui/core/styles"
As stated above you use the following code to set your breakpoints. You are not limited to the pre defined names you can use any name you want. The values are the min-width for the breaking point. So in this case XS stops at 449px.
const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
sm: 450,
md: 600,
lg: 900,
xl: 1200,
tablet:1024
}
}
});
You then have to use a theme provider to implement it.
<ThemeProvider theme={theme}>
<Grid container><Grid item xs={12}>Some stuff</Grid></Grid>
</ThemeProvider>
The Grid is already responsive.
Setting md to be below 12 to set breakpoints for lager screens.
For even larger screens use lg and xl.
It will respect browser resolution/zoom and will automatically put components in a new line, if the screen size is below the given break point.
To add custom break points, you can add these options to create mui theme:
const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
sm: 450,
md: 600,
lg: 900,
xl: 1200
}
}
});
I have a responsive photo grid built within a RN app -
I'd like 3 images to fit across the screen with the respective margin guttering. All images are squares.
I'm after some tips on the best way to achieve this - i'd use percentages in a web build for each image square but understand this isnt a possibility in RN..
This is what I have so Far:
The code basically pulls images out of an array via a map function and adds the grey image upload button at the same size after them as below:
<View style={PhotoStyles.imgThumbnailWrap}>
{this.state.ADImageArray.map((prop, key) => {
return (
<Image
source={{uri: prop, isStatic: true}}
style={PhotoStyles.imgThumbnail}
/>
);
})}
<TouchableOpacity onPress={this.photoAdditional} >
<View style={PhotoStyles.imgThumbAddMore}>
<Image source={require('../images/icons/ico-upload-
photo.png')} style={PhotoStyles.imgThumbnailBtn} />
</View>
</View>
Heres the Styles:
imgThumbnailWrap: {
flex:1,
flexDirection: 'row',
justifyContent: 'flex-start',
flexWrap:'wrap',
},
imgThumbnail: {
backgroundColor:'#f79431',
width:100,
height:100,
margin:8,
},
imgThumbAddMore: {
width:100,
height:100,
margin:8,
backgroundColor: '#e9e9e9',
alignItems:'center',
justifyContent: 'center',
},
As you can see the two image classes (imgThumbnail and imgThumbAddMore) have fixed widths in the above example - i'd like to make them fit in a row of 3 width percentage widths and height based on the width of the parent container (imgThumbnailWrap). Any advice?
You can divide the width of the device and subtract the margin on the outside
import { Dimensions } from "react-native";
const padding = 10
const itemWidth = (Dimensions.get('window').width / 3) - (padding * 4)
Use the itemWidth with both the width and height so you get perfect squares.
This problem can easily solve by using paddingTop, width, and position. Just try the below code.
<View style={{width:'100%',paddingTop:'100%'}}>
<Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
</View>
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same