Блог

Главная - Вопросы по программированию - Пользовательский интерфейс материала: Выбор свернут, автоматическая ширина не работает

Пользовательский интерфейс материала: Выбор свернут, автоматическая ширина не работает

#javascript #reactjs #material-ui #emotion

Вопрос:

Элемент выбора пользовательского интерфейса материала (React) свернут и, несмотря на это, не расширяется автоматически по ширине autoWidth .

введите описание изображения здесь

    <FormControl margin="dense">
          <InputLabel id="prefix-label">Prefix</InputLabel>
          <Select
           autoWidth
           labelId="prefix-label"
           id="prefix"
           disabled={formPrefix.disabled}
           value={formPrefix.value ?? ""}
           error={formPrefix.invalid}
           defaultValue={""}
           label="Prefix"
           onChange={handlePrefix}
          >
                 <MenuItem value={""} disabled>
                        Prefix
                 </MenuItem>
                 <MenuItem value={"US"}>US  1</MenuItem>
                 <MenuItem value={"else"}>Else</MenuItem>
          </Select>
          <FormHelperText></FormHelperText>
   </FormControl>

Я что-то здесь делаю не так?

Комментарии:

1. Автоматическая ширина влияет на ширину «всплывающего окна», которое будет установлено в соответствии с пунктами внутри меню. Это не имеет никакого отношения к ширине вашего Select

2. @NizarZizoune, я вижу. И почему же тогда он рухнул? Что-то не так с заполнителем? После того, как я выберу элемент, он отрегулирует ширину.

3. Я думаю , что это связано с шириной вашего Select , что-то связанное с вашим макетом/css.

Ответ №1:

Вы должны добавить width свойство в sx реквизит FormLabel типа:

 <FormControl margin="dense" sx={{ width: 100 }}>

Вы можете взглянуть на эту песочницу для живого рабочего примера.

Ответ №2:

Добавьте fullWidth реквизиты в <FormControl> компонент вместо <Select> компонента.

Ваш код JSX должен быть таким

 <FormControl margin="dense" fullWidth>
  <InputLabel id="prefix-label">Prefix</InputLabel>
  <Select
    // autoWidth
    // fullWidth
    labelId="prefix-label"
    id="prefix"
    //  disabled={formPrefix.disabled}
    //  value={formPrefix.value ?? ""}
    //  error={formPrefix.invalid}
    defaultValue={""}
    label="Prefix"
    //  onChange={handlePrefix}
  >
    <MenuItem value={""} disabled>
      Prefix
    </MenuItem>
    <MenuItem value={"US"}>US  1</MenuItem>
    <MenuItem value={"else"}>Else</MenuItem>
  </Select>
  <FormHelperText></FormHelperText>
</FormControl>

Отредактируйте этот код в поле CodeSandbox

Метки: ,