пришёл с таким вопросом. Хочу сделать резиновый блок, что бы он изменялся как text-area, но только по ширине.
-
На данном фото открыто приложение телеграмма, но это только для примера – Дмитрий Кузяев 15 сен '20 в 11:57
1 ответ
Если правильно понял, то речь идёт о возможности растягивать\сжимать блок, как это умеет textarea
, можно заставить любой (но это не точно) блок растягиваться, благодаря правилу resize
.resize {
display: block;
min-width: 100px; /* Минимальная ширина, до которой можно "сжать" блок */
width: 200px; /* Дефолтная ширина, её мы будем видеть изначально, а ограничения будут равны min и max правилам. */
max-width: 100vw; /* Максимальная ширина, до которой можно "растянуть" блок */
min-height: 100px; /* для height аналогично */
height: 200px;
max-height: 100vh;
border: 1px solid red;
overflow: hidden; /* Обязательно свойство */
resize: both; /* то, что позволит растягивать блок. Подробнее в ответе */
}
<div class="resize"></div>
Это если речь идёт о "чистых" (без скриптов) решение.
Для более "гибких" решениях, придётся обратиться к скриптам, например jQuery UI - Resizable