Recently, I've been working with material UI and I have a scrolling list of items that I want to resize to be larger. However, I've noticed that no matter how I adjust the height in pixels, the items never exceed 140px.
Below is the code snippet:
<Box
display="flex"
flexDirection="column"
justifyContent="center"
height={800}
overflow={'auto'}
maxWidth="xl"
>
{items.map((item, index) => (
<Paper
key={index}
sx={{ p: 2, height: '200px', width: '75%', margin: '50px auto' }}
>
<Typography sx={{ pb: 2 }} textAlign="center">
{item}
</Typography>
<Box>
{/* Need to create a scrolling container here? */}
<Grid container spacing={2}>
<Grid item xs={12}>
{/* List of items for this date */}
{/* <Item>xs=1.5</Item> */}
{/* Button to add items */}
</Grid>
</Grid>
<Button
variant="outlined"
key={'addEntry'}
onClick={addEntry}
sx={{
my: 2,
color: 'white',
display: 'block',
fontFamily: 'monospace',
}}
>
+
</Button>
</Box>
</Paper>
))}
</Box>
Even though I've specified a height of '200px' in the <Paper> component, the items do not exceed 150px. To work around this, I have to remove the height from the enclosing <Box> element, but I prefer to keep my items within it. Could the culprit be the size of the <Paper> element?