How to add horizontal scroll in Material UI grid
Notice that when you shrink the window of the browser then it appears horizontal scrollbar. Horizontal scrollball only appears when the content overflows outside the browser window. Try to set the width of your root wider than the wide of your browser window. For example 2000px. And delete the width: "100%"
How to implement horizontal scrolling of tiles in MUI GridList?
Note: In the newer versions of MUI, GridList
's been changed to ImageList
, the code below uses the latest API.
You can fill the column instead of row by using the code below:
<ImageList
sx={{
gridAutoFlow: "column",
gridTemplateColumns: "repeat(auto-fill,minmax(160px,1fr)) !important",
gridAutoColumns: "minmax(160px, 1fr)"
}}
>
{images.map((image) => (
<ImageListItem>
<img src={image.thumbnail.uri} />
<ImageListItemBar title={image.thumbnail.name} />
</ImageListItem>
))}
</ImageList>
gridAutoFlow: 'column'
: Tell the grid to create another column if there is no space left instead of going to the next row.gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))'
: Set the column min and max width, min is160px
, if there is more than enough space (no need for horizontal scrollbar), set each column width equally.gridAutoColumns: 'minmax(160px, 1fr)'
: Same as above but for the columns outside of the viewport.
Live Demo
V5
V4
References
- https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
- https://css-tricks.com/snippets/css/complete-guide-grid/
Material UI grid with independent scrolling columns
In my determination to recreate how I used to do it in bootstrap (https://jsfiddle.net/aq9Laaew/226591/) I was actually able to get it working in Material UI as well. And since I wasn't able to find any sort of examples of this online for this specific use case (React / Material UI scrollable columns), hopefully this will help someone else.
Here is the example: https://codesandbox.io/s/z24wl3n58m
html,
body {
margin: 0;
height: 100%;
}
#root {
height: 100%;
display: flex;
flex-direction: column;
}
.flex-section {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.flex-col-scroll {
flex-grow: 1;
overflow: auto;
min-height: 100%;
}
.flex-no-shrink {
flex-shrink: 0;
}
What I was missing was setting the flex on the root. Once we do that, then we can utilize flex-section
, flex-col-scroll
, and flex-no-shrink
(the latter of which is used to prevent elements above the scrolling from being compressed)
Grid in material ui causes horizontal scroll- React
I had the same issue. I figured out a couple solutions but neither feel very elegant:
Disable spacing
Unfortunately this removes all padding from child grid items within the container:
<Grid container
spacing={0}>
Manually fix the CSS
This is what I ended up doing:
<Grid container
style={{
margin: 0,
width: '100%',
}}>
Related Topics
Areas Covered by Flexbox Which Are Difficult or Impossible to Achieve With Grid
Difference Between Auto-Fill and Auto-Fit
What Is Webkit and How Is It Related to Css
How to Resize an Image Dynamically With CSS as the Browser Width/Height Changes
Control the Dashed Border Stroke Length and Distance Between Strokes
Should I Use Max-Device-Width or Max-Width
Difference Between @Import and Link in Css
In Which Order Do CSS Stylesheets Override
How to Reverse an Animation on Mouse Out After Hover
Possible to Use Border-Radius Together With a Border-Image Which Has a Gradient
Browsers' Default CSS Stylesheets
Bootstrap 4 Masonry Layout Utilizing Flexbox Grid
Changing Background Image With Css3 Animations
Why Are CSS Named Grid Areas Not in Quotes
React.Js Inline Style Best Practices