Fix dialog material ui

Question

I have a dialog with material ui where i have a text and then 4 fields textfield. The problem is that the elements inside dialogcontent doesnt fill all the space in the dialog leaving one blank space on the right side.

I would like to give some space between the textfields in the same row as well as space-evenly these elements.

This is my dialog definition:

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import {
  DialogActions,
  Button,
  DialogContent,
  DialogContentText,
} from "@material-ui/core";
import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
import { addProduct } from "../view/Items/Items";
import { useState } from "react";
import { TextField } from "@material-ui/core";
import { updateValues } from "../view/Items/Items";
import { Grid } from "@material-ui/core";

export default function AlertPopOverParametros({
  producto,
  año,
  open,
  setOpen,
  onAccept,
}) {
  const [coef_transp, setCoefTransp] = useState();
  const [coef_comer, setCoefComer] = useState();
  const [km, setKm] = useState();
  const [prod, setProd] = useState();

  return (
    <Dialog fullWidth aria-labelledby="simple-dialog-title" open={open}>
      <DialogTitle id="simple-dialog-title">
        <b>Configuración del producto</b>
      </DialogTitle>
      <DialogContent>
        <DialogContentText>
          Introduzca los valores necesarios para el cálculo del valor de huella
          hídrica
        </DialogContentText>

        <TextField
          onChange={(e) => setCoefTransp(e.target.value)}
          autoFocus
          label="Coeficiente de Transporte"
          type="number"
          value={coef_transp}
        />

        <TextField
          onChange={(e) => setCoefComer(e.target.value)}
          autoFocus
          label="Coeficiente de Comercialización"
          type="number"
          value={coef_comer}
        />

        <TextField
          onChange={(e) => setKm(e.target.value)}
          autoFocus
          label="Kilómetros"
          type="number"
          value={km}
        />

        <TextField
          onChange={(e) => setProd(e.target.value)}
          autoFocus
          label="Producción"
          type="number"
          value={prod}
        />
      </DialogContent>

      <DialogActions>
        {onAccept ? (
          <Button
            style={{
              backgroundColor: "#0068ff",
              color: "white",
              borderRadius: "5px",
            }}
            fullWidth
            onClick={() => {
              onAccept();
              console.log(producto, año, coef_transp, coef_comer, km, prod);

              updateValues(producto, año, coef_transp, coef_comer, km, prod);

              setOpen(false);
            }}
          >
            Aceptar
          </Button>
        ) : null}
      </DialogActions>
    </Dialog>
  );
}

I have tried to wrap everything in a Grid element and specifying the size of it but it didn't work.

Thank you so much.

Answer 1

Using a Grid and fullWidth property on the Textfields will solve your issue:

<Grid container>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
      <Grid xs={6}>
        <TextField
          fullWidth
          ...
        />
      </Grid>
    </Grid>

The Grid will order the textfields into two rows and two columns by setting xs to 6 on the grid childs. Then in order to make your textfields span the entire width of the grid child you can use the fullWidth property.