Question 45938 in CSS Question posted in
Some basic documentation can be found here.

Aligning element to Stack – CSS

I am new to React/MUI, so a little help would be great.

I have a Stack of TextFields, they are resizing with the screen width very nicely.

<Stack
        direction="row"
        sx={{
          margin: "16px"
        }}
      >
        <Stack sx={{ flexGrow: 1 }}>
          <Box sx={{ flexWrap: "wrap" }}>
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
          </Box>
        </Stack>
      </Stack>

I am trying to put an action button that is:

  • always aligned to the right of the screen
  • always stays on the same row with at least one TextField (never on its own row)
  • does not take all vertical space (TextFields can be on top and to the left of it)

The closest I got is to wrap it in flex-inline, block-inline Box, but I cannot always satisfy all the requirements.

Thank you!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Someone put a correct answer but then deleted it for whatever reason, therefore I am reposting it:

    <Stack
  sx={{
    flexDirection: "row",
    minWidth: "360px",
  }}
  <Box sx={{ display: "flex", flexWrap: "wrap" }}>
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <Box
            sx={{
              flexGrow: 1,
              display: "flex",
              justifyContent: "flex-end",
              flexShrink: 0,
            }}
          />
    </Box>

</Stack>

  2. 0

    The Stack has a default flexDirection of column. You can change it to row.

    To align to the right you can use justifyContent: "end".

    For the minimal 2 at a row you can add a minWidth: "360px" which is twice the TextField width.

    <Stack
  sx={{
    flexWrap: "wrap",
    flexDirection: "row",
    justifyContent: "end",
    minWidth: "360px",
  }}
>
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
</Stack>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search