CODEWITHSUNDEEP
cssreactjsmaterial-ui
code
code

Reputation: 57

MUI: how to align text side by side?

I want the numbers and text to line up side-by-side like this picture. enter image description here But there is a margin to the right of that text(MASTER I 406), so the numbers don't come in the right place. Currently I'm using transform: 'translateY()' to force the number into position. In this way, the position of the number is broken when the size of the screen is changed. Please tell me how to solve this.

https://codesandbox.io/s/still-morning-0q92mh?file=/src/App.js

enter image description here

Upvotes: 1

Views: 2782

Answers (3)

Ertuğrul Karababa
Ertuğrul Karababa

Reputation: 63

<ListItemText
  primary={
    <div>
      <span>{comment.UserName}</span>
      <span style={{ float: "right" }}>10.10.2022</span>
    </div>
  }
  secondary={comment.Comment}
/>

Result

Upvotes: 0

Hamed Siaban
Hamed Siaban

Reputation: 1681

MUI Grid layout is a very powerful system you can use for your customized UI. You need one Grid container with 2 Grid items inside. Your code should be like this:

import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";

export default function App() {
  return (
    <Card
      sx={{
        borderRadius: 7,
        marginTop: 3
      }}
    >
      <CardContent>
        <Grid container sx={{ alignItems: "center" }}>
          <Grid item xs={10}>
            <RiceBowlIcon />
            <Typography
              component="span"
              sx={{
                fontSize: 20,
                fontWeight: 600
              }}
            >
              JohnDoe
            </Typography>
            <Typography
              sx={{
                fontSize: 10,
                color: "#909090",
                ml: 4
              }}
            >
              MASTER I 100
            </Typography>
          </Grid>
          <Grid item xs={2} sx={{ textAlign: "center" }}>
            <Typography
              sx={{
                fontSize: 20,
                fontWeight: 540,
                mr: 2
              }}
            >
              (+10.00%)
            </Typography>
            <Typography
              component="span"
              sx={{
                fontSize: 20,
                fontWeight: 540
              }}
            >
              10,000
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

Upvotes: 1

Akis
Akis

Reputation: 2292

You can use the Grid system like the solution below:

import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";

export default function App() {
  return (
    <Card
      sx={{
        borderRadius: 7,
        marginTop: 3
      }}
    >
      <CardContent>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <RiceBowlIcon />
            <Typography
              component="span"
              sx={{
                fontSize: 20,
                marginLeft: 1,
                fontWeight: 600
              }}
            >
              JohnDoe
            </Typography>
            <Typography
              sx={{
                fontSize: 10,
                ml: 4,
                color: "#909090",
                // width: "20%"  // You don't need to specify the width as it wil break the text in two lines
              }}
            >
              MASTER I 100
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography
              sx={{
                float: "right",
                fontSize: 20,
                fontWeight: 540
              }}
            >
              (+10.00%)
            </Typography>
            <Typography
              component="span"
              sx={{
                float: "right",
                fontSize: 20,
                fontWeight: 540
              }}
            >
              10,000
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

To explain a little more, you can create a Grid with two Grid Items. In the left Grid item you have the icon with the texts so it will work as a container and on the right one, the numbers '10.000'. With that way the content of the left Grid shouldn't affect the content of the right one.

Here is the updated sandbox based on your code.

Upvotes: 1

Related Questions