What is the best way to position two grid containers side by side?

I am new to using Material UI and Grid, and I'm encountering an issue with positioning two grid containers side by side.

My goal is to have an image on the left within a Grid container, and a list of objects on the right. While I was successful in positioning the list correctly, the image refuses to align to the left.

Below is the code snippet I used:

return (
    <>
      <Appbar />
      <br />
        <Grid container justifyContent={"right"} style={{marginTop:"50px"}}>
        <Grid container direction="row" item xs={6}>
        <Grid item>
        <Paper elevation={3} style={paperStyle}>
          {currentPosts.map(pakketje => (
            <Paper elevation={6} style={{ margin: "10px", padding: "15px", textAlign: "left", backgroundColor: "white", borderRadius: "25px" }} key={pakketje.id}>
              <p style={{fontSize:"18px"}}><b>Pakketje&emsp;&emsp;&emsp;&emsp;</b></p>
              <b>ID: {pakketje.id}</b>
              &emsp;&emsp;
              <b>Status: {pakketje.status}</b>
              &emsp;&emsp;
              <b>Code: {pakketje.code}</b> 
              <br /><br />
              <Button variant="contained" style={{ backgroundColor: "#AE0000" }} color="secondary" onClick={(e) => deletePakketje(pakketje.id, e)}>
                Delete <DeleteIcon fontSize="small" />
              </Button>&emsp;
              <Link to={`/pakketjeUpdaten/${pakketje.id}`}>
                <Button variant="contained" style={{ backgroundColor: "Navy" }} color="secondary">
                  Update <ReplayIcon fontSize="small" />
                </Button>
              </Link>&emsp;
              <Button variant="contained" style={{ backgroundColor: "black" }} color="secondary" onClick={(e) => statusOnderweg(pakketje.id, e)}>
                Verzenden&emsp;<LocalShippingIcon fontSize="small" />
              </Button>
              <br />
              <br />
            </Paper>
          ))
          } 
        </Paper>
        </Grid>
        </Grid>
        </Grid>

        <Grid container justifyContent={"left"}>
        <Grid container direction="column" item xs={4}>
        <Grid item>
        <div>
          <img src={AllePakketjes} width="410" height="350" alt="" style={{ marginLeft: "365px" }} />
        </div>
        <h1 style={{ textAlign: "center", color: "white" }}>Alle pakketjes</h1>
        </Grid>
        </Grid>
        </Grid>
      
    </>
  );
}

I've attempted to create another Grid container for the image and position it next to the list, but it remains fixed in one place below the list.

Below are screenshots of the desired user interface:

https://i.sstatic.net/QYmwc.png

https://i.sstatic.net/GP4Y0.png

Answer №1

Eliminate unnecessary Grid containers from your code. Instead, consolidate your layout by using a single Grid container with the attribute direction set to "row" for alignment. Place the first left element as the initial Grid item child, and utilize the xs attribute to control the size of each item. Modify your code as follows:

return (
  <>
    <Appbar />
    <br />

    <Grid container direction="row" style={{ marginTop: "50px" }}>
      <Grid item xs={4}>
        <div>
          <img src={AllePakketjes} width="410" height="350" alt="" style={{ marginLeft: "365px" }} />
        </div>
        <h1 style={{ textAlign: "center", color: "white" }}>Alle pakketjes</h1>
      </Grid>
      <Grid item xs={6}>
        <Paper elevation={3} style={paperStyle}>
          {currentPosts.map(pakketje => (
            <Paper elevation={6} style={{ margin: "10px", padding: "15px", textAlign: "left", backgroundColor: "white", borderRadius: "25px" }} key={pakketje.id}>
              <p style={{ fontSize: "18px" }}><b>Pakketje&emsp;&emsp;&emsp;&emsp;</b></p>
              <b>ID: {pakketje.id}</b>
              &emsp;&emsp;
              <b>Status: {pakketje.status}</b>
              &emsp;&emsp;
              <b>Code: {pakketje.code}</b>
              <br /><br />
              <Button variant="contained" style={{ backgroundColor: "#AE0000" }} color="secondary" onClick={(e) => deletePakketje(pakketje.id, e)}>
                Delete <DeleteIcon fontSize="small" />
              </Button>&emsp;
              <Link to={`/pakketjeUpdaten/${pakketje.id}`}>
                <Button variant="contained" style={{ backgroundColor: "Navy" }} color="secondary">
                  Update <ReplayIcon fontSize="small" />
                </Button>
              </Link>&emsp;
              <Button variant="contained" style={{ backgroundColor: "black" }} color="secondary" onClick={(e) => statusOnderweg(pakketje.id, e)}>
                Verzenden&emsp;<LocalShippingIcon fontSize="small" />
              </Button>
              <br />
              <br />
            </Paper>

          ))
          }
        </Paper>
      </Grid>
    </Grid>
  </>
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Encountering an undefined issue while attempting to call for mongoose in a react environment

When attempting to import mongoose into my project, I encountered the following error message: Uncaught ReferenceError: require is not defined I need some assistance! Code snippet causing the issue: const mongoose= require('mongoose'); const m ...

It is generally not recommended to begin a constructor name with a lowercase letter in jsPDF

I'm attempting to generate a PDF using React const myComponent = () => { const pdfGenerator = () => { const doc = new jsPDF(); //I also attempted: new jsPDF('landscape', 'px', 'a4', 'false'); ...

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

Currently, I am facing a challenge with a large map image (3000x8000px) in .png format that I have converted to .svg for data visualization purposes. I am struggling to find a way to display a specific small section of this map.svg file on an HTML page u ...

What is the best way to specify the CSS :hover state within a jQuery selector?

I am trying to change the background color of a div element when hovered using jQuery, but for some reason the following code is not working as expected: $(".myclass:hover div").css("background-color","red"); Can someone provide guidance on how to achiev ...

Next.js uses router.asPath to dynamically update the state

I am working on a next.js multistep form with a Stepper component. Upon the initial load, the Stepper is set to have the following state: const [steps, setStepsData] = useState([ { name: 'Vertrag', status: 'current' }, { name: ...

Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...

The z-index of the fixed header in FullPageJS is causing the section's content to be hidden

For my current project, I am incorporating FullPageJS and using a fixed top menu that adjusts its height based on the viewport size. On smaller screens, the menu items will be stacked on top of each other, while on wider screens, the menu items will be po ...

What is the best way to ensure that the input areas stretch all the way to the edge of the screen?

This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...

Failure to capture spaces in onChange events for <input> elements

I'm having an issue where the onChange event is not being called on my HTML input element when pressing the space bar. Here's a snippet of what I've tried: class FilterDropDown extends React.PureComponent { state = { query: '&ap ...

Handling state in Material UI components with React

Is there a way to incorporate conditional styles in Material UI while working with React? <div className={clsx(selectedCount > 0 classes.red : classes.table)} > </div> ...

Leveraging gulp in combination with browserify and React along with additional addons

Currently, I am delving into the world of gulp, browserify, and react while working on a small test project. Everything was going smoothly until I decided to incorporate some animations. Specifically, this code snippet is causing me trouble: var React = r ...

Retrieving data using the Material-UI ListItemText component

In my code, I am using Material UI components such as: <ListItemText onClick={(e) => handleAreaSelection(e)} primary={area} /> </ListItem> Within my code, I have the following function: const handleAreaSele ...

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

The static menu is malfunctioning and is disrupting the smooth operation of the website

I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixe ...

Searching for related values in a nested array of objects using JavaScript: A guide

My goal for this project is to thoroughly examine the path along with all nested elements within the Items and assign them to the details variable. However, due to the limitations of the function inside the useEffect, I am unable to check nested items eff ...

Encountering issues with executing NPM commands following the deployment of a React application on GitHub pages

After successfully deploying to github pages for the first time, I encountered errors whenever running NPM commands in my project. The set of errors is as follows: geekcentric => npm start npm ERR! file /mnt/c/Users/GeekCentric/Documents/ReactJS/the_a ...

Mastering the Igr Data grid with Next JS: A comprehensive guide

Hello everyone, I'm diving into Next.js for the first time and attempting to integrate the igr data grid into my application. However, I keep encountering an error when trying to use the igr data grid in React: "ReferenceError: HTMLElement is not defi ...

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

Unable to install React using npx within the VS Code environment

Encountering an issue during the installation of React using npx in VS Code npm ERR! network Socket timeout npm ERR! network This error is related to network connectivity. npm ERR! network It is likely caused by being behind a proxy or having poor networ ...

Managing user roles uses a combination of node.js, express, sequelize, and react

I found a tutorial on bezkoder that helps with creating user roles. However, I am facing an issue where by default, the user is assigned role 1 [subscriber] during sign-up. As someone who is new to all of this, I'm unsure of how much modification is r ...