I am implementing the exact same code shown in the material-ui library documentation here
https://mui.com/x/react-data-grid/layout/#flex-layout
I am trying to implement the flex layout,
I just did the exact same steps and the console shows the error all the time:
Sandbox:
https://stackblitz.com/edit/react-8ahs3n?file=src/App.js
Please help, appreciated.
In the documentation example you linked to there is one additional div wrapping what you have in your code: <div style={{ height: 400, width: '100%' }}>. Including that wrapper element (which gives the element an intrinsic height as mentioned in the console warning) gets rid of the console error. Here's a modified version of your stackblitz that does not have the error: https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js.
The 400px height in the documentation example can be replaced by whatever height you want -- it just can't be percent-based. If you want the DataGrid to be the full height of the browser, you can use 100vh instead of 100%.
Here's an example:
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
import { useDemoData } from "#mui/x-data-grid-generator";
import CssBaseline from "#mui/material/CssBaseline";
export default function FlexLayoutGrid() {
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 50,
maxColumns: 6
});
return (
<>
<CssBaseline />
<div style={{ height: "100vh", width: "100%" }}>
<div style={{ display: "flex", height: "100%" }}>
<div style={{ flexGrow: 1 }}>
<DataGrid {...data} />
</div>
</div>
</div>
</>
);
}
In my example I included the CssBaseline component in order to get rid of the default 8px margin on the <body> element -- otherwise using 100vh will cause a scroll bar to appear; however the default margin (or a custom margin in your app) can be accounted for in other ways by using calc (e.g. height: "calc(100vh - 16px)").
Use a wrapper component such as Box from Material UI with flex display and height:
<div style={{ height: 400, width: '100%' }}>
<Box style={{
display: "flex",
height:400,
justifyContent: "center",
alignItems: "center"
}}
>
<Datagrid/>
</Box>
</div>
I just started with react native, I wanted to align card images next to each other (react-native-elements) but it does not work for some reason. What I want to achieve is two rows in on phones and 3 rows on tablets. But for some reason my code does not work. First the cards are aligned connected to each other no space between them and on my phone (Iphone 12) it is aligned as a column. Even though I have set flex-direction to row. could someone look at my code and tell me what is wrong?
card-image element
<View style={styles.secondPartOfDisplay}>
{categories.map((c,i) => {
return (
<View key={i} style={{width: 200, height: 150, flexDirection: 'row'}}>
<Card.Image >
<Image
style={{width:200,height:150}}
resizeMode="cover"
source={c.imageSource}
/>
</Card.Image>
</View>
)
})}
</View>
styles:
secondPartOfDisplay: {
paddingTop: 30,
display:'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: "space-between"
},
And here is the image on how it looks on phone:
This is how it looks on ipad:
If there iis no extra margin or padding that's messing with your container grid, then probably your images are not responsive according to the screen size. You would probably need to set your image height: "100%" and width: "auto"
Hope this resolves your issue.
I have a scroll view that contains an image that covers the entire screen. There are two buttons at the bottom of the screen, these will allow you to download or set the image as a wallpaper. The problem I'm having is I don't know which image is being looked at in the horizontal scroll view when the button is clicked.
I have knowledge of the screen size and was assuming if I could get the content offset or something like that from the currently viewed image in the view divided by the screen size could let me know what image in the array I'm looking at to perform the rest of the functionality.
unfortunately, I'm unaware of how this could be done the code is below to give a bit of context.
<ScrollView
horizontal
decelerationRate={0}
snapToInterval={width}
snapToAlignment={"center"}
style={{ height: height }}
>
{
availibleBackgrounds.map(element => (
<Image
style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
source={{
uri: element
}}
/>
))
}
</ScrollView>
Thanks in advance,
Chris.
You need to get the offset of the content and you can do it with adding the following prop the the ScrollView:
onMomentumScrollEnd={event => setSelectedIndex(event.nativeEvent.contentOffset.x/width)}
setSelectedIndex is a function you should create.
To add a little more closure to this question here's what I've done
calculateCurrentIndex(position) {
this.setState({
selectedIndex: {
current: Math.ceil((position / width).toFixed(2)),
}
});
}
----------------------------------------
<ScrollView
horizontal
decelerationRate={0}
snapToInterval={width}
snapToAlignment={"center"}
style={{ height: height }}
onMomentumScrollEnd={event => this.calculateCurrentIndex(event.nativeEvent.contentOffset.x)}
showsHorizontalScrollIndicator={false}
>
{
availibleBackgrounds.map((element, index) => (
<Image
key={index}
style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
source={{
uri: element
}}
/>
))
}
</ScrollView>
I use material-ui popper to show a list of avatars.
I want to show avatars horizontally in the popper.
<Popper style={{ display: 'flex', maxWidth: '200px', }}>
<div style={{ marginRight: '20px' }}><Avatar /></div>
<div style={{ marginRight: '20px' }}><Avatar /></div>
</Popper>
It's overflowing from the popper, but I want them to come to next line.
I need a maxWidth. because I don't want popper to grow longer.
Looking like this right now:
You can add flex-wrap: wrap (flexWrap: 'wrap') to the code, so It will go to the next line everytime the items occupy the full width.
<Popper style={{ display: 'flex', maxWidth: '200px', flexWrap: 'wrap' }}>
<div style={{ marginRight: '20px' }}><Avatar /></div>
<div style={{ marginRight: '20px' }}><Avatar /></div>
</Popper>
Use flexWrap:'wrap' in container View
I want to align an item in the primary axis. For example, I want to have a row with a few children all aligned left, and then one child aligned on the right side.
You could achieve that effect with something like "position: absolute; right: 0", but I'm wondering if theres a better way. It seems like there ought to be a justifySelf property, that only affects one child and affects its alignment on the primary axis, in the same way the alignSelf affects one child's alignment on the secondary axis.
Yet no such justifySelf seems to exist. Why is this?
It's similar to this question but not quite: How can you float: right in React Native?
I don't know React Native, but I do know flexbox!
Use the following code as a guide:
<div style="display: flex;">
<div>
I'll be on the left side
</div>
<div>
I'll be hugging the guy on the left side
</div>
<div>
I'll be hugging the guy hugging the guy on the left side
</div>
<div style="margin-left: auto;">
I'll be hugging the right side far away from those other guys
</div>
</div>
The margin set on the last child will push all other children to the left as far as their styles will allow, and push itself as far right as any other styles will allow.
You can test this out by also adding margin-right: auto; to the last child, and you will see the last child centered perfectly in the remaining space of the parent div, after the first three children take up their allotted space. This is because the competing "margin autos" will both share equally whatever space remains, since they can't cancel each other out and won't override each other.
Flex box was designed to handle margin spacing like this, so take advantage of it, as well as the other unique spacing options available under the justify-content property.
Helpful article: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
I believe you want to achieve something like this:
You can implement this by nesting views which share the same justifyContent property.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
</View>
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
A partial answer: there's no justifySelf in React Native because there's no justify-self for flexbox in real CSS. There is a justify-self CSS property, but it doesn't do anything in flexbox layouts. You can see in the spec at https://drafts.csswg.org/css-align-3/#overview that justify-self is defined to apply to:
block-level boxes, absolutely-positioned boxes, and grid items
which notably doesn't include "flex items".
Okay, but why is this the case in CSS? MDN offers an explanation that you may or may not find satisfactory:
There is no justify-self in Flexbox
On the main axis Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The justify-content property controls how that leftover space is used. Set justify-content: flex-end and the extra space is placed before the items, justify-content: space-around and it is placed either side of the item in that dimension, etc.
This means that a justify-self property does not make sense in Flexbox as we are always dealing with moving the entire group of items around.
On the cross axis align-self makes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end.
There's clearly some sense to this. It's always meaningful and coherent to put alignSelf: 'center' on a flex item to ask for it to be centered on the cross axis. But what would it mean to, for instance, put justifySelf: 'center' on a flex item, to ask for it to be centered on the main axis? How is that supposed to be handled if previous flex items have already filled more than half of the space along that axis?
Margins provide a fine solution for cases like yours. justifySelf, on the other hand, can't reasonably exist for flexbox, because the justifyContent values specify how to distribute flex items, and a little thought about what it would mean to instead apply them to individually specified items reveals that doing so is basically incoherent.
There is an easy way to do this without absolute positioning that works exactly how you'd expect with all items of varying heights lining up on the y-axis appropriately.
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{ backgroundColor: 'green', height: 50, width: 50 }} />
<Text style={{flex: 1}}> text in here because why not!</Text>
<View style={{ backgroundColor: 'yellow', width: 30, height: 30 }} />
</View>
You can take a look at Flex Docs!
Adding flexDirection to a component's style determines the primary axis of its layout.
and then:
Adding alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa).
So your desired code will be:
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class AlignItemsBasics extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
UPDATE
If you mean something like this image:
Then I'll suggest you this:
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
class Playground extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.boxes} />
<View style={styles.boxes} />
<View
style={[
styles.boxes,
{
backgroundColor: "crimson",
position: "absolute",
right: 0
}
]}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center"
},
boxes: {
width: 50,
height: 50,
marginLeft: 1, // to separate each box!
backgroundColor: "steelblue"
}
});
export default Playground;
As far as i know with these props, it's the best way!
I really think the best way around this is to wrap whatever you're displaying inside a <View> with position: "absolute", and also add position: "absolute" to the element you want. Then, inside the <View>, add justifyContent: "center", and alignItems: "center". Hopefully this solves the issue.