Question 295568 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to display the selected item in row in Material UI

I have a a dropdown component that allows user to select the language they desired. When the item is selected, the image and the text should be displayed in a row. The problem is that the selected item is displayed vertically. I tried using flexDirection: 'row' on the Select component and MenuItem component, but it didnt work.

<Box sx={{width: '100%'}}> 
    <Select sx={{width: '160px'}} defaultValue={1}>
        <MenuItem sx={{gap: 1}} value={1}>
            <Avatar src={UK} sx={{width: 24, height: 24 }}/>
            English
        </MenuItem>
        <MenuItem sx={{gap: 1}} value={2}>
            <Avatar src={Malaysia} sx={{width: 24, height: 24 }}/>
            Malay
        </MenuItem>
        <MenuItem sx={{gap: 1}} value={3}>
            <Avatar src={China} sx={{width: 24, height: 24 }}/>
            Mandarin
        </MenuItem>
    </Select>
</Box>
Tags:

2

Answers


  1. 0

    you need to use Stack for the same.

    Here, is the full code:

    import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Avatar from "@mui/material/Avatar";
import Stack from "@mui/material/Stack";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <Stack direction="row" spacing={2}>
            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            <MenuItem value={10}>Ten</MenuItem>
          </Stack>

          <Stack direction="row" spacing={2}>
            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            <MenuItem value={20}>Twenty</MenuItem>
          </Stack>
          <Stack direction="row" spacing={2}>
            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            <MenuItem value={30}>Thirty</MenuItem>
          </Stack>
        </Select>
      </FormControl>
    </Box>
  );
}

    Let me know, if you have any questios.

    Login or Signup to reply.
  2. 0 
    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
  <Select sx={{ width: '160px' }} defaultValue={1}>
    <MenuItem sx={{ gap: 1, display: 'flex', flexDirection: 'row' }} value={1}>
      <Avatar src={UK} sx={{ width: 24, height: 24 }} />
      English
    </MenuItem>
    <MenuItem sx={{ gap: 1, display: 'flex', flexDirection: 'row' }} value={2}>
      <Avatar src={Malaysia} sx={{ width: 24, height: 24 }} />
      Malay
    </MenuItem>
    <MenuItem sx={{ gap: 1, display: 'flex', flexDirection: 'row' }} value={3}>
      <Avatar src={China} sx={{ width: 24, height: 24 }} />
      Mandarin
    </MenuItem>
  </Select>
</Box>

    I added display: ‘flex’ and flexDirection: ‘row’ to the MenuItem components to make sure they are displayed horizontally. The Box component with display: ‘flex’ is used to wrap the MenuItem elements.

    Let me know, if you have any questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search