Почему textarea не подстраивает ширину автоматически?

Question

[Александр Попов]

Пытаюсь поправить вёрстку в своём старом проекте: xmessenger.ru/mobile (нужна регистрация), при этом столкнулся со странным поведением textarea. Элемент вложен в тег form, тот в свою очередь вложен в несколько дивов последовательно, один из которых по пути вверх в иерархии имеет абсолютное позиционирование.

Проблема такая: атрибуты left, right, top и bottom по отдельности работают, но width: auto не хочет работать ни в какую. При указании left и right, отсутствии max-width - все браузеры упорно ставят фиксированную ширину, взятую откуда-то "с потолка". Задание элементу form position: relative, задание ему же явной ширины, вложение в form дива с position: relative, удаление части элементов из form, задание всем потомкам form position: absolute результата не дают. Не работает ничего, абсолютно. Что я делаю не так?

Мне нужно растянуть textarea на весь экран (зафиксировать только левый и правый отступы). Я могу считать ширину на JavaScript, но это полный изврат. Прошу помощи.

UPD: ссылка на исходный код с проблемным полем: rgho.st/private/75XPkmXbH/6a3535a4cb99d176e27be427...

Answer 1

[Александр Попов]

Проблема решилась обёртыванием textarea в div. Почему div умеет вычислять ширину автоматически, а img, button, и textarea - нет (даже если им поставить display: block), для меня загадка.

Comments

[Алексей Струков]

У меня все вычисляет автоматически)
Дисплэй блок и контейнер нужен просто
и еще обратил ща внимание что Вы ставили width: auto, а надо 100%

[Александр Попов]

Я и поставил 100%, когда обернул в контейнер. Но я в идеале хотел без контейнера, а в этом случае 100 процентов означало бы весь экран и даже больше (если только не изменить box-sizing на border-box).

Answer 2

[Андрей Федоров]

textarea {
width: 100%;
box-sizing: border-box;
}

И textarea будет шириной с родителя.

Comments

[Алексей Струков]

и еще можно дать ему display: block;

[Александр Попов]

display: block пробовал, вроде, ничего не изменилось.

width: 100% - не вариант. Мне нужны отступы слева и справа, в пикселях. Ещё и разные :)
А не тупо на весь вьюпорт (в вашем случае так выйдет).

Вопрос в том, почему не работает автоширина (всегда ведь работала, сколько ни верстал такие вещи).

[Андрей Федоров]

Александр Попов: Нужны отступы - дайте родителю padding.

[Александр Попов]

Андрей Федоров: так это ничего не изменит, если задать ширину в процентах, она будет в процентах. Я же объясняю, автоподстройка не работает, а calc() работает не во всех браузерах, мне нужна поддержка старых Опер и старых IE (и при этом поля в пикселях). Почему не работает автовычисление, вот в чём вопрос. Потому что textarea?

P. S. Сейчас проверил с элементами img и button - всё то же самое. Как так? При задании left и right всё должно работать как нужно...

[Андрей Федоров]

Александр Попов: Вы принципиально ошибаетесь относительно назначения width: auto. С этим параметром ширина блока в общем случае подстраивается под ширину внутреннего содержимого.

Я знаю, что мой ответ работает. Давайте код, посмотрим что вы там нагородили, что у вас не срабатывает.

[Александр Попов]

Андрей Федоров: не совсем, насколько я помню, в случае display: inline-block будет по содержимому, а в случае display: block - на всю ширину родителя. В данном случае у меня display: block стоит. Но я сейчас даже не про width: auto. Что не так с автоподгонкой ширины по left и right?..

Ссылку на код я уже прикрепил к исходному сообщению.

[Андрей Федоров]

Потому что left и right не для этого. Но в принципе их использование для задания ширины - допустимо. Сейчас посмотрю код.

[Александр Попов]

Андрей Федоров: на самом деле, я уже нашёл решение минуты две назад сам... Но было бы классно, если бы Вы объяснили, почему происходит именно так. Желательно в стандарты носом ткнуть :)

[Александр Попов]

Андрей Федоров: я допускаю, что там можно всё сверстать иначе... Но это потребует кучи вложенных элементов, которые семантически не нужны. То есть лишняя разметка, которая хуже читается, и даёт большую нагрузку на слабые мобильные девайсы... Я-то привык минимумом элементов обходиться (возможно, это и не правильно).

[Андрей Федоров]

Александр Попов: Т.е. сработал мой ответ - родительскому div вы дали padding, а для textarea width: 100% или display: block, что в данном случае одно и тоже. )

Носом можно ткнуть, только не обижайтесь. Вы неверно трактуте свойста width, position, left, right. Не видите разницы между блочными и inline элементами. Поскольку это достаточно базовые вещи, полагаю имеет также недостаток знаний по остальным темам. Предлагаю найти какие-нибудь онлайн курсы, типа htmlacademy.

[Александр Попов]

Андрей Федоров: нет, не так, родительскому div я дал left и right, как и хотел.
С чего Вы взяли, что я не вижу разницы между блочными, и инлайн элементами? Странные у Вас какие-то выводы.

Например, тот же img легко можно заставить себя вести как блочный элемент, хотя по умолчанию он inline-block. Но тем не менее, для него автоширина по left и right тоже не вычисляется...

Так конкретную выдержку из стандартов Вы можете указать, которая пролила бы свет на то, почему для div это работает, а для других элементов - нет?

[Александр Попов]

Андрей Федоров: а смысл мне родительскому div давать padding? Вы смотрели разметку? Там есть две квадратные кнопки справа, вообще вне формы, они относительно родительского контейнера позиционируются абсолютно. Высота формы, судя по инспектору, определяется автоматически по контенту (по единственному элементу, который имеет высоту, и позиционируется не абсолютно, то есть в стандартном потоке идёт).

Так что мне нет смысла внутри формы, которая растягивается на всю ширину, использовать padding. Хотя конечно я бы мог это сделать. Мне проще позиционировать эту обёртку абсолютно - даже не относительно формы, а относительно её предка с position: absolute, который по ширине с ней совпадает :)

Меня вот удивляет другое: изначально для textarea была задана ширина как width: 50%. Теперь я в инспекторе любого браузера снимаю галку с этого свойства... И почему-то ширина остаётся прежней! Хотя должна бы как-то поменяться, по логике вещей.

[Андрей Федоров]

Александр Попов: Страницу вашу я не посмотрел - там слишком много js, чтобы огульно запускать его у себя. К тому же на ваш хостинг ругается мой браузер. Я посмотрел ваш HTML, он достаточно стандартен для формы, но я не могу понять для чего там может понадобиться абсолютное позиционирование. Я уверен на 99% что оно там совершенно не требуется. Пришлите скриншот как правильно должна выглядеть ваша форма.

[Александр Попов]

>Там слишком много js, чтобы огульно запускать его у себя

Эм, что, простите? А в чём проблема-то? Боитесь кражи ваших кук?) Так файл-то локальный, а куки читаются только с того домена, на котором скрипт расположен...

>К тому же на ваш хостинг ругается мой браузер

Так я же локальный HTML файл скинул. То, что ваш браузер ругается на один из крупнейших файлообменников (с довольно приличной репутацией, кстати) - это уже Ваши проблемы, извините.

>Я посмотрел ваш HTML

Извините, как вы посмотрели HTML, если не стали скачивать файл? А как узнали, что там много JS, значит всё-таки скачали? :)
Вредоносного кода там нет, там лишь идёт попытка загрузить данные комнаты, которые недоступны (поскольку Вы не залогинены, и поскольку файл запускается локально, а не на сервере проекта).

>Я уверен на 99% что оно там совершенно не требуется. Пришлите скриншот как правильно должна выглядеть ваша форма.

Я же не спорю, что можно без него, но тогда придётся городить много лишних контейнеров. Имхо, это не лучший путь...

>Пришлите скриншот как правильно должна выглядеть ваша форма

Так же, как сейчас, но поле должно идти до кнопок справа. Или вы таки не смотрели страницу?

[Андрей Федоров]

Александр Попов: Ну ясно. Вы задаете вопрос в расчете на то, что вам помогут. Люди из чистого альтруизма тратят свое время, пытаются дать совет. Но если нужно заниматься телепатией или жертвовать безопасностью, то лично я - пас.

[Александр Попов]

Выглядеть должно вот так:
fastpic.ru/view/79/2016/0724/10d3380034eeee88ea90a...

[Андрей Федоров]

Александр Попов: Ссылка битая.

[Александр Попов]

Андрей Федоров: вы сами начали меня критиковать и пытаться искать пробелы в моих знаниях, хотя я просил совсем не об этом. Безопасность Вашу я уважаю, даже не думал пытаться подкладывать какую-то "свинью". Но если для вас обычная страничка с JS опасна... Ну тогда я не знаю, что тут сделать :)

JS код, к слову, удалённый, а веб-страница локальная - ещё одна причина, почему он ни к чему доступа не имеет. И кстати, можно его вообще начисто вырезать, хуже не будет. Всё равно сплошные эксепшены сыпятся. Моя вина, что я его не убрал, да. Боялся, что может как-то внешний вид страницы пострадать, если убрать скрипты совсем.

[Александр Попов]

И хостинг кстати использовал не от хорошей жизни, а только потому, что здесь нельзя прикрепить файл прямо к сообщению.

[Андрей Федоров]

Александр Попов: тут обычно используют codepen и jsfiddle, поэтому всякие левые хостинги - минимум странно.

[Александр Попов]

Андрей Федоров: я знаю, что используют. Ну это же для небольших набросков на JS, или демонстрации CSS трюка. А там гора разметки совершенно не удобочитаемая, плюс стили, часть из которых во внешнем файле, а часть заинлайнена... Это большой проект, и написанный не везде "красиво" и хорошо. Мне было лень выдирать оттуда куски, да и сложно было выдрать, сохранив полностью внешний вид.

[Андрей Федоров]

Александр Попов: Можно вырезать проблемный кусок...

Answer 3

[Сергей Горбулев]

Парни, тоже пытался настроить <textarea>, потом нашёл в интернете простое решение: вместо <textarea> использовать
<div contenteditable="true">
или
<p contenteditable="true">
и всё, можно редактировать, ширина автоматически изменяется.

Comments

[Александр Попов]

Я знаю, что так можно :)
Но это не всегда хорошо. Например, пользователь может вставить много лишнего через буфер (картинки, форматирование), и это лишнее как минимум выведется у него в инпуте, а как максимум - ещё и попадёт в БД, если мы отправляем форму на сервер. Фильтровать всё равно по-хорошему конечно нужно, но а) в некоторых приложениях для 1-2 пользователей, где точно никаких тегов в textarea вводить не планируется - можно про фильтрацию случайно и позабыть, и б) это некрасиво смотрится в браузере при вставке. Например, фон страницы и полей ввода у нас фиолетовый, вставили текст с форматированием - получили чёрный текст на фиолетовом фоне с тёмно-синими ссылками :)