Textarea CSS в элементе table-cell div (IE)
ПРИМЕЧАНИЕ. Это проблема только в IE.
Как заставить текстовое поле вертикально заполнить div таблицы-ячейки? Я применил height: 100% ко всем родительским элементам, но текстовая область все еще сохраняет свою высоту по умолчанию.
Снимок экрана:
Пример моей проблемы: JSFiddle
HTML
CSS
В соответствии с этой статьей вы увидите, что то, что вы пытаетесь сделать, невозможно с помощью построения табличной ячейки. Здесь скрипка, демонстрирующая, что происходит, когда вы удаляете всю высоту CSS. Предупреждение о спойлере: ничего не происходит, потому что ни один из ваших тегов высоты не имеет значения.
Поля высоты/ширины CSS основаны на ближайшем родителе с определенной высотой или шириной, исключая элементы display: table* . В вашем случае выше, такой элемент не существует, поэтому ни один из меток высоты не имеет эффекта.
Я заключил ваш код в тег тела, который имеет определенную ширину, хотя он все еще относительно расположен. Это достигается с помощью абсолютного позиционирования:
Как вы можете видеть, текстовая область заполняет контейнер. Это связано с тем, что таблица имеет высоту, а все остальные элементы вычисляют их высоту от высоты стола.
К сожалению, это решение, вероятно, субоптимально для вас, поскольку оно не будет работать для нескольких строк. Существует не CSS-единственное решение для распространения вычисленной высоты CSS в качестве фактической высоты CSS для сестры в IE. Вам понадобится атрибут высоты, определенный для родителя, и затем вы можете распространить его вниз на ребенка.
Есть варианты, хотя. Если абсолютно необходимо, чтобы текстовое поле было того же размера элемента эскиза, а высота эскиза действительно переменной, вы можете подключиться к событию визуализации на своей странице (например, $(document).ready() ), чтобы захватить вычисленную высоту и установить это как фактическая высота:
Однако я поклонник не-jquery-решений. Поэтому я считаю, что лучшим решением может быть пересмотр вашего макета. Используйте то, что вы знаете об элементе эскиза, чтобы заранее установить высоту строки или изменить масштаб элемента эскиза. Например, если вы встраиваете видео YouTube в миниатюру, вы можете масштабировать максимальную высоту iframe до 100% и вручную установить высоту строки, скажем, 200px. Если вместо этого вы встраиваете изображение, вы можете использовать CSS для масштабирования максимальной высоты и максимальной ширины вашего изображения, что будет учитывать соотношение сторон (но относительно интенсивно вычислительно), или вы можете предварительно обработать ваши изображения и масштабировать их до желаемая высота.
Источник
Изменение высоты textarea по размеру экрана
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Автоматическое изменение высоты textarea
Сию фичу увидел в новой версии phpMyAdmin при вводе sql запроса, очень удобно. Все мои попытки.
Изменение размера элементов соответственно размеру экрана аппарата
Здравствуйте уважаемые. Прежде чем как писать, искал решение в гугле но так и не понял как.
Textarea по размеру содержимого
Всем привет. Имеется textarea. Надо сделать так, чтобы при вводе текста, высота textarea.
Задать textarea по размеру фрейма
Имеется frameset: 12
Решение
Это кто такое сказал?
Не надо ничего запрашивать, просто задайте для textarea width:100%; height:100%;
Получилось и без этого.
Добавлено через 3 минуты
Здравствуйте! Подскажите пожалуйста, возможно ли настроить автоматическре изменение высоты сразу.
Запрет на изменение окна
Как поставить запрет на изменение окна
Определение в CSS высоты блока по размеру просматриваемой области в браузере
Здравствуйте. Столкнулся с такой проблемой, что не могу определить высоту блока div ровно по высоте.
textarea увеличение высоты
Доброго времени суток! Мне необходимо сделать
текстовую область заданной длинны, и.
Автоматическая подборка высоты textarea
Понадобилась необходимость сделать автоподборку высоты textarea при вводе текста. Гуглил, но.
Изображения по размеру экрана
Подскажите, как установить фоновое изображение по размеру экрана?
Источник
Почему textarea не подстраивает ширину автоматически?
Пытаюсь поправить вёрстку в своём старом проекте: 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, но это полный изврат. Прошу помощи.
- Вопрос задан более трёх лет назад
- 3515 просмотров
display: block пробовал, вроде, ничего не изменилось.
width: 100% — не вариант. Мне нужны отступы слева и справа, в пикселях. Ещё и разные 🙂
А не тупо на весь вьюпорт (в вашем случае так выйдет).
Вопрос в том, почему не работает автоширина (всегда ведь работала, сколько ни верстал такие вещи).
Андрей Федоров: так это ничего не изменит, если задать ширину в процентах, она будет в процентах. Я же объясняю, автоподстройка не работает, а calc() работает не во всех браузерах, мне нужна поддержка старых Опер и старых IE (и при этом поля в пикселях). Почему не работает автовычисление, вот в чём вопрос. Потому что textarea?
P. S. Сейчас проверил с элементами img и button — всё то же самое. Как так? При задании left и right всё должно работать как нужно.
Александр Попов: Вы принципиально ошибаетесь относительно назначения width: auto. С этим параметром ширина блока в общем случае подстраивается под ширину внутреннего содержимого.
Я знаю, что мой ответ работает. Давайте код, посмотрим что вы там нагородили, что у вас не срабатывает.
Андрей Федоров: не совсем, насколько я помню, в случае display: inline-block будет по содержимому, а в случае display: block — на всю ширину родителя. В данном случае у меня display: block стоит. Но я сейчас даже не про width: auto. Что не так с автоподгонкой ширины по 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 файл скинул. То, что ваш браузер ругается на один из крупнейших файлообменников (с довольно приличной репутацией, кстати) — это уже Ваши проблемы, извините.
>Я посмотрел ваш HTML
Извините, как вы посмотрели HTML, если не стали скачивать файл? А как узнали, что там много JS, значит всё-таки скачали? 🙂
Вредоносного кода там нет, там лишь идёт попытка загрузить данные комнаты, которые недоступны (поскольку Вы не залогинены, и поскольку файл запускается локально, а не на сервере проекта).
>Я уверен на 99% что оно там совершенно не требуется. Пришлите скриншот как правильно должна выглядеть ваша форма.
Я же не спорю, что можно без него, но тогда придётся городить много лишних контейнеров. Имхо, это не лучший путь.
>Пришлите скриншот как правильно должна выглядеть ваша форма
Так же, как сейчас, но поле должно идти до кнопок справа. Или вы таки не смотрели страницу?
Источник
Textarea Auto height [duplicate]
I want to make height of textarea equal to height of the text within it (And remove the scroll bar)
8 Answers 8
This using Pure JavaScript Code.
For those of us accomplishing this with Angular JS, I used a directive
HTML:
JS:
$timeout queues an event that will fire after the DOM loads, which is what’s necessary to get the right scrollHeight (otherwise you’ll get undefined )
It can be achieved using JS. Here is a ‘one-line’ solution using elastic.js:
Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend autosize.js by Jack Moore. This is the working example:
Check this similar topics too:
I used jQuery AutoSize. When I tried using Elastic it frequently gave me bogus heights (really tall textarea’s). jQuery AutoSize has worked well and hasn’t had this issue.
I see that this is answered already, but I believe I have a simple jQuery solution ( jQuery is not even really needed; I just enjoy using it ):
I suggest counting the line breaks in the textarea text and setting the rows attribute of the textarea accordingly.
Источник
How can I make a TextArea 100% width without overflowing when padding is present in CSS?
I have the following CSS and HTML snippet being rendered.
The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want. I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
If you’re not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
Not perfect, but you’ll get some padding and the width adds up to 100% so its all good
I came across another solution here that is so simple: add padding-right to the textarea’s container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
The container’s padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
This code works for me with IE8 and Firefox
You can make use of the box-sizing property, it’s supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don’t think it is OK with you to express padding and border widths in percentage of the parent too.
If you pad and offset it like this:
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container. and the left side of the textarea ‘sticks out’ a bit. it’s sometimes prettier.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
I often fix that problem with calc() . You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
Or if you want to give the textarea a border:
How about negative margins?
The problem lies in the box-sizing property. By default, the initial value of the box-sizing property is content-box . so you have something like this under the hood:
box-sizing: content-box; means that the width of the actual element is equal to the width of the element’s content box. so when you add padding (in this case padding-right and padding-left —> because we are talking about width) and border (in this case border-right and border-left —> because we are talking about width), these values get added to the final width. so your element will be wider than you want.
set it to box-sizing: border-box; . so the width will be calculated like so:
in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.
Источник