Выравнивание полей по размеру

size="sm"

Все поля размера sm имеют одинаковую высоту (2.025rem).

size="md"

Все поля размера md имеют одинаковую высоту (2.55rem).

size="lg"

Все поля размера lg имеют одинаковую высоту (2.95rem).

Исключения

Textarea — размер задаёт отступы и шрифт, высота определяется числом строк. FileUpload — размер масштабирует зону загрузки. Switch, Slider и InputRating имеют собственную геометрию.

Описание

Все поля формы одного размера имеют одинаковую высоту. Высота задаётся общим миксином c3-control-height() из assets/styles/_control.scss и равна сумме отступов из c3-control-size(), строки текста (line-height: 1.2) и двух бордюров: 2.025rem для sm, 2.55rem для md и 2.95rem для lg.

Чтобы высота не зависела от содержимого, иконки и свотчи масштабируются вместе с полем: на sm иконка-шеврон и иконка календаря — 14px, свотч цвета — 15px, то есть не выше строки текста.

Дополнительная информация

  • Подпадают под общую высоту: Input, InputDate, InputTime, InputMenu, InputNumber, InputTags, InputButton, Select, SelectMenu, Listbox, ColorPicker, DatePicker, PinInput.
  • Textarea и FileUpload учитывают размер, но не фиксируют высоту: многострочному полю и зоне загрузки она нужна произвольная.
  • InputTags при переносе тегов растёт выше минимальной высоты — это ожидаемо.
  • Размер любого поля определяется единообразно: props.size поля → size обёртки C3FormField → 'md'. Собственный проп поля важнее обёртки, поэтому им можно переопределить размер для отдельного поля внутри формы.
  • C3FormField отдаёт размер реактивно: при смене size у обёртки все поля без собственного размера обновляются сразу.
×