css Question posted in
Some basic documentation can be found here.

Css – How can I center the options from a MUI autocomplete and to wrap them in a border?

I need to center the options from a MUI autocomplete but I tried many ways but still a failure. Also I need to wrap each option in a border.
I tried to add it to inputProps and in a style paper component but it didn’t work
this is my code so far:

const PlacementCell = ({ value, placements, notAvailable = false, readOnly = false }: PlacementCellProps): ReactElement => {
  const { palette, spacing } = useTheme();
  const [selectedPlacement, setSelectedPlacement] = useState<Placement | undefined>(value || placements[0]);

  const handlePlacementChange = (event: React.SyntheticEvent, newValue: Placement | null) => {
    if (newValue !== null) {
      setSelectedPlacement(newValue);
    }
  };

const CustomListbox = styled('ul')({
  [`& .${autocompleteClasses.option}`]: {
    display: 'flex',
    justifyContent: 'center',
  },
});

  return (
    <Stack
      direction="row"
      height={1}
      alignItems="center"
      spacing={2}
      justifyContent="space-between"
    >
      <Autocomplete
        options={placements}
        getOptionLabel={(option) => option.placementName}
        renderInput={(params) => (
          <TextField
            placeholder="Select"
            {...params}
            InputProps={{
          ...params.InputProps,
          disableUnderline: true,
            }}
            inputProps={{
              ...params.inputProps,
              style: { textAlign: 'center' },
            }}
            sx={{
              [`& .${autocompleteClasses.inputRoot} .MuiInput-input`]: {
                padding: '12px',
              },
              variant: 'bodySmall.default',
              [`& .${autocompleteClasses.popupIndicator}`]: {
                right: 12,
                ['&:hover']: {
                backgroundColor: 'transparent',
                },
              },
            }}
          />
        )}
        // PaperComponent={CustomPaper}
        fullWidth
        disableClearable
        onChange={handlePlacementChange}
      />
    </Stack>
  );
};

Here is an image of what I have to display
enter image description here

Thanks for any suggestion!

Tags:

2

Answers


  1. 0

    You should use slotProps on your Autocomplete like mentioned here:
    https://stackoverflow.com/a/78267213/11184255

    So it would look something like that

    <Autocomplete
...
  slotProps={{
    paper: {
      sx: {
        '& .MuiAutocomplete-listbox': {
          '& .MuiAutocomplete-option': {
            display: 'flex',
            justifyContent: 'center',
            border: '1px solid lightgray',
            margin: '5px'
          },
        },
      },
    },
  }}
/>
    Login or Signup to reply.
  2. 0

    Alongside the slotProps route. You could try using the renderOption. This route could give you more ability to choose exactly what goes into each list item as you can now use any MUI component inside of it.

    MUI Autocomplete renderOption Example

    Doing this allows you to click even outside of the box but in the same row and still trigger a select. slotProps does also allow for that but it requires more CSS into it.

    And if you wanted the user to have to select inside the box but not the row, you could just move the {...params} from the box to the Typography and it should work only when the user clicks inside the box.

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

Back To Top
Search