Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a Material UI grid element sticky?

I am creating the front-end of for shopping cart. I have divided the container into two columns (using Grid container and Grid item) and inside each column, I have inserted some components. The left side contains components for each item and the left side contains only one component that shows the Order Summary. This picture illustrates what I am saying:

current view of the shopping cart on the desktop

My question is how to make this left side (Order Summary) sticky at the top of the page when a user scrolls. I tried a couple of things with z-index and costume CSS-styling (position: fixed and position: sticky) but they break the Grid Structure that the Material UI offers. Also considering that the view is responsive it would be great that for mobile screens the Order Summary component stays at the end of the page where it is now:

current view of the shopping cart on the mobile

I could achieve to stick the component on top on desktop but then when I added custom styling the component stuck in the top in the mobile view and looks terrible. Is there any practical way to achieve this that I may have not noticed?

Here is the Sandbox of the project: https://codesandbox.io/s/charming-cherry-eh27f

I hope that this way of dividing the page into columns would be helpful for somebody because I struggled a bit to find something similar online and thought of this way myself this morning. At the same time, I would appreciate any feedback and help for this feature I am trying to implement.

UPDATE

The solution provided by MaCadiz below works totally fine. I just wanted to say that feel free to create any pull requests if you want to add more features to this project. Here is the Github repo link: https://github.com/kleviss/shopping-cart-frontend-react-material

like image 606
klevisx Avatar asked Dec 04 '20 17:12

klevisx


People also ask

Is material UI grid responsive?

The responsive UI in Material-UI is based on a 12-column grid layout. To understand this better, imagine the website you are looking at is split into 12 even columns. The number you pass will set the Grid to take up that many columns in the breakpoint width.

How do you align grid items in material UI?

Material-UI Grid Center Align and Vertical Align However, if you wanted to achieve vertical alignment using CSS, you would want to use align items with one of the following values: flex-start: vertically aligns top. center: vertically aligns center. flex-end: vertically aligns bottom.

Can material UI grid be container and an item?

Material Design's grid system is implemented in MUI using the <Grid /> component. Under the hood, the <Grid /> component uses Flexbox properties for greater flexibility. There are two types of grid components: containers and items.

Is it possible to set a sticky column in material-UI?

Material-UI comes with a Table component with significant customizations and styling options. The Table even includes a sticky header option. However, it does not have a prop for setting ‘sticky column’.

How do I add a codesandbox to a material-UI table?

The Codesandbox below is forked straight from the “basic table” example in the Material-UI Table docs. Here are the three most important parts: Create a css class containing the three style properties mentioned above (the class is named “sticky” in my example). In the first TableCell component in TableHead > TableRow, add the sticky class.

Does material UI grid use Flexbox?

Material UI Grid's grid uses Flexbox under the hood. The properties of Flexbox are used as properties of the Grid, so you can control the component as if it were a flexbox. Additionally, Material UI's Grid also provides helpers for spacing , responsive design, and fitting a 12 column layout.

How do I make a sticky column in a table cell?

Create a css class containing the three style properties mentioned above (the class is named “sticky” in my example). In the first TableCell component in TableHead > TableRow, add the sticky class. In the first TableCell of the rows map of the TableBody, add the sticky class. After these three things, you should have a sticky first column.


1 Answers

In your sandbox I realized that you have a nested grid item inside another grid item, I don't know if this was intentional, but I removed it anyway.

<Grid item xs={12} sm={6} md={5} lg={5}>
  <Grid item xs elevation={3}> <==== THIS ONE
    <OrderSummaryItem />
  </Grid>
</Grid>

Then I set the position of the OrderSummaryItem component to sticky and some tweaks and I think it's working fine. Check this fork I made from your sandbox: https://codesandbox.io/s/amazing-darkness-q0o5h

like image 73
MaCadiz Avatar answered Oct 19 '22 22:10

MaCadiz