Почему height auto у textarea не выставляется меньше 50px?
Есть скрипт, позволяющий автоматически регулировать высоту textarea:
// auto resize element textarea.addEventListener('input', function (event){ event.target.style.height = 'auto'; event.target.style.height = event.target.scrollHeight + 'px'; }); |
// auto resize element textarea.addEventListener('input', function (event){ event.target.style.height = 'auto'; event.target.style.height = event.target.scrollHeight + 'px'; });
Изначально высота стоит в 50px. Размер шрифта 23px, padding 2px. Далее, при переносе новых строк высота прибавляется и убавляется как надо, но никогда не становится меньше 50px. Что это за поведение? И как сделать изначальную и динамическую высоту при одной строке в одну строку, а не в две?
Дополнительно:
overflow-x: hidden;?
но никогда не становится меньше
Вероятно, установлено свойство min-height = 50px (оно же в JS - minHeight = '50px');
И как сделать изначальную и динамическую высоту при одной строке в одну строку, а не в две
Попробуйте на постоянной основе:
height: fit-content;
Чтобы не городить JS со сменой высоты.
Оказалось, что по умолчанию у textarea атрибут rows="2", даже если явно не указан. И элемент постоянно пытается подогнать значение высоты под него.
Нужно просто установить в html/js значение атрибута rows="1", тогда у элемента будет ожидаемое поведение.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с выставлением высоты textarea меньше 50px может иметь несколько причин. Во-первых, стилизация элемента может быть ограничена некоторыми браузерными стандартами или дефолтными значениями. Во-вторых, некоторые CSS свойства могут переопределять высоту textarea и не позволять ей быть меньше определенного значения.
Для решения этой проблемы, можно использовать следующий подход:
1. Установить свойство `min-height` для textarea на значение, которое не будет меньше 50px. Например, `min-height: 50px;`.
2. Использовать свойство `resize: none;`, чтобы запретить изменение размеров textarea пользователем.
3. Проверить, что никакие другие стили или скрипты не переопределяют высоту textarea. Можно использовать инструменты разработчика браузера для этой цели.
Пример кода с применением вышеперечисленных подходов:
<textarea style="min-height: 50px"></textarea>
Если после применения этих рекомендаций проблема не решится, то возможно стоит обратить внимание на другие стили или скрипты, которые могут влиять на высоту textarea. Также стоит убедиться, что браузер поддерживает указанные CSS свойства.