Material UI- Facing a problem to align the grid to float right

Question

I am in learning phase of the material-ui and I am facing an issue that I am not able to float the grid content into right side.

I tried alignItems="flex-start" justify="flex-end" direction="row" in the container grid but not succeed and also tried css float:right property.

I go through the answer of stackoverflow question but it not work for me.

My Code is below and codesandbox link

import React from "react";
import ReactDOM from "react-dom";
import {
  ExpansionPanel,
  ExpansionPanelSummary,
  ExpansionPanelDetails,
  Typography,
  Grid
} from "@material-ui/core/";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

function App() {
  return (
    <ExpansionPanel square defaultExpanded={true}>
      <ExpansionPanelSummary
        style={{ backgroundColor: "#009ACD", color: "white" }}
        expandIcon={<ExpandMoreIcon />}
        id="panel1a-header"
      >
        <Typography variant="h6">General Details</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <Grid container>
          <Grid item sm={3}>
            Image Container
          </Grid>
          <Grid item sm={2}>
            <Typography variant="h6"> {"Prabhat Kumar"}</Typography>
            <Typography> Tester </Typography>
          </Grid>
          <Grid
            contaienr
            sm={7}
            alignItems="flex-end"
            justify="flex-end"
            direction="row"
          >
            <Grid item>
              <Typography variant="h6">
                      Need this content on the right side
              </Typography>
            </Grid>
          </Grid>
        </Grid>
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

score 3 · Accepted Answer · answered Sep 08 '19 at 17:58

I tried you sandbox and found a few things going on here:

contaienr where should be container

         <Grid
            contaienr // Fix
            sm={7}
            alignItems="flex-end" // remove
            justify="flex-end"
            direction="row" // Remove
          >

Just replace those to this:

<Grid container sm={7} justify="flex-end">

Material UI- Facing a problem to align the grid to float right

1 Answers1