Размеры интерактивных элементов в интерфейсах на базе Tom Select напрямую влияют на удобство работы на сенсорных устройствах, скорость выбора и частоту ошибочных нажатий. Особенно критичны отступы и высота элементов в мобильных сценариях, где точность взаимодействия ограничена размером пальца и отсутствием курсора.
Tom Select строится вокруг нескольких ключевых зон взаимодействия:
.ts-control).ts-dropdown).option).item)Каждый из этих компонентов участвует в формировании общей «плотности» интерфейса. Даже небольшие изменения padding и line-height приводят к заметной разнице в удобстве использования.
Визуальная высота контролируется не только height, но и
комбинацией:
font-sizepaddingline-heightborder-widthИменно поэтому фиксированная высота без учета внутренних отступов часто приводит к обрезанию текста или уменьшению кликабельной зоны.
Практика мобильного UI предполагает минимальный размер интерактивной области около 44×44 пикселей. В контексте Tom Select это означает, что:
.ts-control должен быть не ниже этой границы.option в выпадающем списке должен иметь
достаточный вертикальный padding.item в multi-select не должны сжиматься ниже
удобного размераТипичная ошибка — уменьшение высоты поля ради компактности интерфейса, что приводит к трудности выбора и случайным нажатиям на соседние элементы.
Основное поле .ts-control часто наследует стили от
input или select, но требует явной настройки
для стабильного поведения на разных устройствах.
Ключевые параметры:
.ts-control {
min-height: 44px;
padding: 10px 12px;
font-size: 16px;
line-height: 20px;
}Использование font-size: 16px особенно важно для
iOS-устройств, где меньшие размеры текста могут вызывать автоматический
zoom при фокусе на input.
При multi-select высота становится динамической, поэтому важно задавать:
min-height для стартового состоянияpadding-top и padding-bottom для
компенсации переносов строк внутри контейнераВыпадающий список .ts-dropdown является наиболее
чувствительной зоной с точки зрения точности касаний. Ошибки здесь чаще
всего возникают при слишком плотной компоновке элементов.
Рекомендуемая структура:
.ts-dropdown .option {
padding: 10px 12px;
font-size: 16px;
line-height: 22px;
}Увеличение вертикального padding выполняет сразу две функции:
Дополнительное улучшение достигается за счет увеличения расстояния между группами:
.ts-dropdown .optgroup-header {
padding: 8px 12px;
font-weight: 600;
}В режиме множественного выбора каждый выбранный элемент
(.item) становится интерактивной сущностью внутри поля. При
недостаточном размере таких элементов возникает проблема случайного
удаления или невозможности точного нажатия на крестик удаления.
Рекомендуемая модель:
.ts-control .item {
padding: 6px 10px;
margin: 2px 4px;
line-height: 18px;
border-radius: 4px;
}Особое внимание требуется кнопке удаления внутри элемента. Она должна иметь расширенную hit-area:
.ts-control .item .remove {
padding: 4px;
margin-left: 6px;
}Даже если визуально элемент выглядит компактным, фактическая зона клика должна быть увеличена за счет внутреннего padding.
Tom Select часто используется в таблицах и фильтрах, где требуется уменьшение высоты. В таких случаях возникает конфликт между плотностью интерфейса и удобством касаний.
Компромиссное решение — уменьшение визуальных отступов при сохранении минимальной сенсорной зоны:
.ts-control.compact {
min-height: 36px;
padding: 6px 8px;
}
.ts-control.compact .item {
padding: 4px 8px;
margin: 1px 3px;
}Однако даже в компактном режиме не рекомендуется опускаться ниже критического порога удобства взаимодействия на мобильных устройствах.
На iOS Safari и Android Chrome существуют дополнительные особенности:
Чтобы избежать нежелательного zoom, используется:
.ts-control input {
font-size: 16px;
}Для корректного скролла списка важно:
.ts-dropdown {
max-height: 240px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}Слишком большая высота dropdown приводит к выходу за пределы экрана, а слишком маленькая — к частому скроллу внутри скролла страницы.
Единый вертикальный ритм снижает вероятность ошибок при быстром выборе. Он формируется через согласованные значения:
.option.ts-controlПри несогласованных значениях интерфейс становится «рваным», что особенно заметно при длинных списках.
Пример согласованной системы:
:root {
--ts-font-size: 16px;
--ts-line-height: 22px;
--ts-padding-y: 10px;
--ts-padding-x: 12px;
}.ts-control,
.ts-dropdown .option {
font-size: var(--ts-font-size);
line-height: var(--ts-line-height);
padding: var(--ts-padding-y) var(--ts-padding-x);
}В интерфейсах с высокой плотностью данных часто возникает проблема попадания пальцем в нужный элемент. Решается это увеличением не только padding, но и псевдо-области клика:
.ts-dropdown .option {
position: relative;
}
.ts-dropdown .option::before {
content: "";
position: absolute;
inset: 0;
}Такой подход расширяет область взаимодействия без изменения визуального дизайна.
При использовании асинхронной подгрузки данных или кастомных рендеров элементов важно избегать скачков высоты.
Проблемные сценарии:
Решение заключается в фиксированной базовой высоте строки:
.ts-dropdown .option {
min-height: 44px;
display: flex;
align-items: center;
}Это выравнивает все элементы по вертикали и предотвращает «прыжки» интерфейса при скролле.
Использование px в чистом виде делает интерфейс менее
адаптивным к системным настройкам масштабирования. Более устойчивый
подход — переход на rem:
.ts-control {
font-size: 1rem;
padding: 0.625rem 0.75rem;
min-height: 2.75rem;
}Это позволяет интерфейсу корректно масштабироваться при изменении базового размера шрифта в браузере или операционной системе.
При фокусе важно не уменьшать визуальные отступы, чтобы не сокращать интерактивную область:
.ts-control.focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}Добавление визуального фокуса компенсирует отсутствие изменения геометрии элемента и помогает пользователю ориентироваться в состоянии компонента.
Чрезмерное уменьшение размеров приводит к ряду негативных эффектов:
Оптимальная плотность достигается не минимизацией размеров, а балансом между: