I'm trying to only have one column in a grid. But the prop columns={1} is not working. And the columns are not taking the whole width of the window.
This is the code where I return the component.
return (
<Grid columns={1} textAlign='center' container divided='vertically'>
<Grid.Column width={6}>
<Search fluid size='huge'
loading = {isLoading}
onResultSelect = {this.handleResultSelect}
onSearchChange = {this.handleSearchChange}
results = {results}
value = {value} />
{this.state.rides}
</Grid.Column>
<Grid.Column width={10}>
<Image src={faker.image.avatar()} style={{ backgroundSize: 'cover' }} />
</Grid.Column>
</Grid>
);
Image of how it looks at present.
In fact, it's wrong usage of props, columns and width can't be combined. Take a look on this issue on Github, it contains more info about Grid. Also, you can check official docs of SUI.
This is because of the width prop you have on your Grid.Column sub-components. The width for each child column should add up to the total number of columns you have specified.
You could add multiple Grid.Column components to the following layout and they will all appear in a single column:
<Grid
columns={1}
textAlign="center"
container
divided="vertically"
>
<Grid.Column>
...
</Grid.Column>
<Grid.Column>
...
</Grid.Column>
</Grid>
What is the result you are trying to achieve?
I set up an example to play around with at the following URL: https://codesandbox.io/s/pyvqv1k01m
Related
I'm using MUI V.5 with React.
And I would like to display an image in my grid, when rows are empty (when the user search for a product into the grid and can't find any result).
But I don't know how to access to this part sin filas (img reference)
enter image description here
{products ? (
<Box component="div" style={{ width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
checkboxSelection={true}
autoHeight
density="comfortable"
/>
</Box>
) : (
<div>Loading</div>
)}
</>
You can define a new component and override NoRowsOverlay component of MUI datagrid like this:
const MyCustomNoRowsOverlay = () => (
<img src="/no-items-found.jpg" alt="no-item" />
);
<DataGrid
components={{
NoRowsOverlay: MyCustomNoRowsOverlay
}}
You can take a look at this sandbox for a live working example of this solution.
I'm currently using MUI Grid (but I'm open to alternate solutions) and I want two components side by side: the right most taking up 400px of width and the left component taking up the rest.
|<------------------------------- 100% of page ------------------------------->|
|<-------------------- Fill -------------------->| |<---------- 400px ----------->|
When page width is shrunk:
|<-------------------- 100% of page -------------------->|
|<--------- Fill --------->| |<---------- 400px ----------->|
My code is currently stretching the leftComponent to 100% of the page and pushing the rightComponent below it.
<Grid container spacing={3}>
<Grid item xs={12} >
<leftComponent />
</Grid>
<Grid item style={{width: "400px"}}>
<rightComponent />
</Grid>
</Grid>
All you need to do is remove the number for your xs value. Doing this just tells the item to have a width of auto which will just fill the space
<Grid container spacing={3}>
<Grid item xs>
<leftComponent />
</Grid>
<Grid item style={{width: "400px"}}>
<rightComponent />
</Grid>
</Grid>
Though I would recommend not using grid for this situation but using Box component instead as the Grid component is really meant to stick with the 12 columns and adding in a fixed width would break it.
I am looking at react-admin demo code trying to learn from it. I have noticed quite a few time the same behavior: demo code is not waiting for a record to load and does not get undefined exceptions. I am struggling to understand why are they not getting the undefined exception. For example: In PosterEdit source code they are just using the component which looks like
const Poster = ({ record }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent className={classes.content}>
<img src={record.image} alt="" className={classes.img} />
</CardContent>
</Card>
);
};
If I use the component in the same way, I get undefined exception
TypeError: can't access property "image", record is undefined
I do not understand the magic from the demo code. Can someone demystify?
I found the answer for this exact example.
My Poster component was placed within several Grid components from material-u. Here is the cleaned code sample to show the structure.
<Edit {...props} aside={<Aside />}>
<TabbedForm }>
<FormTab >
<Grid container fullWidth className={classes.tabContent}>
<Grid item xs={7}>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" gutterBottom className={classes.sectionTitle}/>
<Poster
</Grid>
</Grid>
</Grid>
</Grid>
</FormTab >
..other form tabs..
</TabbedForm }>
</Edit>
If the component is placed directly as FormTab child, then it works. I still do not understand why though. Anyway, I hope it helps someone.
I am using material UI's Grid component and making use of the auto property for the first column
so I have
<Grid container className={classes.borderclass}>
<Grid item xs={"auto"}>
<Items />
</Grid>
<Grid item xs={10}>
<Content />
</Grid>
</Grid>
However this will not fill the entire container but I do not seem to see an option for remainder in the sizes.
I have looked into css calc option however I do not see a way to get the size of the auto column in react to compare against the div
any suggestions even if it is not material ui will be appreciated.
If you check the Material-UI demo, they have a working example that shows the auto property in action. So, as the example depicted here, you don't need to specify the auto keyword. Do just this:
<Grid container className={classes.borderclass}>
<Grid item xs>
<Items />
</Grid>
<Grid item xs={10}>
<Content />
</Grid>
</Grid>
In my react styled-component i have a Flex component with a couple of children and a separate component:
<Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
{children}
<AlertBell path={pathname} />
</Flex>
I am trying to align children and AlertBell component to the right. However when I add more margin to the AlertBell the children do not move to the left. How can I align the elements right even when increasing the margin in AlertBell?
There are slight differences in the required syntax:
<Flex alignItems="center" justifyContent="flex-end" flex="1 0 auto" px={[12, 18]}>
{children}
<AlertBell path={pathname} />
</Flex>
alignItems="center" is also the default in the current version. flex prop would not be required for this to work, as it applies to the wrapper itself.