Input width не работает

Как сделать адаптивный по высоте/ширине инпут

Рано или поздно вы получите от дизайнера макет, где встретится он — с виду вроде бы обычный текстовый инпут, а на деле, меняющий свою ширину или высоту, в зависимости от содержимого. Хорошие новости — отчаиваться не будем, это возможно. Причем, возможно достаточно разнообразными способами, об одном из них сегодня и поговорим.

Проблема

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

Главная проблема состоит в том, что элементы ввода не умеют растягиваться по своему содержимому. Это очень досадно и конечно мир был бы лучше, если бы они умели, но увы. Более того, однострочное текстовое поле — input вообще бессмысленно растягивать в высоту, содержимое все равно не ляжет в несколько строк, так уж он устроен. Поэтому дальше начинаются любимые фронтендерами лайфхаки.

Варианты решения

Самый первый, приходящий в топ выдачи гугла — это просто взять и заменить инпут на div с атрибутом contenteditable — и вот оно, проблема решена! Вот вам адаптивный по высоте/ширине див и редактируемое содержимое. Но если для вас (как и для меня) это не вариант, то смотрим дальше.

Следующий вариант не назовешь слишком изящным, но работающий вот что важно. Основан на том, что где-то позади самого текстового поля мы прячем невидимый блок, куда дублируем содержимое текстового поля при любом изменении. Блок изменяет свои размеры по содержимому, мы вычисляем их с помощью ява-скрипта и присваиваем текстовому полю. Если вас не смущает дополнительный мусор на странице в виде такого вот костыля — смело можно брать на вооружение.

Ну и третий вариант, который мне больше всего пришелся по душе — это все-таки вычислять содержимое текстового инпута и адаптировать его ширину/высоту, чтобы все помещалось. Давайте на него посмотрим чуть более внимательно.

Выбираем правильный инпут

Прежде всего, понадобится заменить input на textarea. Поскольку инпуты бесполезно наращивать в высоту, лучше сразу возьмем многострочное поле и будем делать вид, что это однострочный инпут.

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

Тут следует обратить внимание на три обязательных параметра, без которых ничего не сработает: box-sizing, height, min-height.

box-sizing: border-box

В обязательном порядке box-sizing должен быть в значении border-box, чтобы когда вы добавите паддинг в текстовом поле, а вы его обязательно добавите, он не увеличивал дополнительно высоту или ширину текстового поля, а откладывался бы вовнутрь.

height и min-height (width и min-width)

Тут все просто: height — чтобы изначально textarea выглядела бы как input. min-height — чтобы при сбросе значения высоты текстовое поле не прыгало, а оставалось минимально необходимого размера. Все это справедливо и для свойств width и min-width.

Немного теории

Принцип действия очень простой. У каждого DOM-элемента, который может содержать контент, есть readonly-свойство scrollHeight (scrollWidth) которое и содержит так нужную нам, истинную высоту элемента, такую, при которой все содержимое этого элемента будет видно пользователю. Все, что нам требуется — при изменении текстового поля, вычислять значение scrollHeight/scrollWidth и присваивать его текстовому полю.

А для того, чтобы текстовое поле могло еще и возвращаться к своему исходному виду, перед изменением, будем сбрасывать установленную ранее высоту до нуля, для того чтобы свойство scrollHeight корректно бы показало нам, есть ли контент, не умещающийся в текстовом поле.

Немного vanilla JS-практики

Специально не использовала никаких фреймворков, для большей гибкости. Любым удобным способом получаем текстовое поле со страницы и добавляем обработчик события input

Это ввод с клавиатуры. Не стоит забывать, что текстовые поля бывают заполняются автоматически, извне. Для этого добавляем отдельный метод вставки значения:

Ну и давайте для ширины тоже сделаем. Все то же самое, только тут уже берем input, и высоту меняем на ширину.

Результат

Вот такие поля получились. Несложно и недолго.

Адаптивный инпут, растущий в высоту:

Адаптивный инпут, растущий в ширину:

Angular Директива

Для тех, кто дочитал аж до сюда — бонус. Если лень самостоятельно упаковать все это в директиву, я уже все сделала за вас, смотрите:

Здесь используется уже знакомый вам декоратор @HostListener. А если еще не знакомый, то обязательно почитайте статью об этом.

Пример использования:

Да, можно обойтись одним элементом — textarea. Просто, если нужна адаптивность в ширину — добавим CSS-свойство white-space: nowrap — запрет на перенос строк.

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

Приходилось вам сталкиваться с подобной задачей? Как решали?

Источник

Растянуть input на ширину блока

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Something.

Растянуть шаблон на всю ширину экрана
всем привет. подскажите где выставить параметр в шаблоне, чтобы он был во всю ширину экрана. был.

Растянуть таблицу на всю ширину экрана
Проблема такая, делаю сайт из 3х страниц, на 2х страницах все нормально, а на третьей не получается.

Добавлено через 6 минут
Galiof_irk, написал глупость просто сначала не понял что вы хотели

Добавлено через 5 минут
Galiof_irk, как вариант пойдет, но думаю можно и лучше сделать.

Растянуть
на всю ширину родительского элемента
В общем, есть меню. Родительский элемент —

В нём несколько элементов
. Выглядит так: .

Растянуть страницу на всю ширину экрана
Подскажите, как растянуть html страницу на всю ширину экрана?

Как растянуть подменю на всю ширину экрана
Требуется растянуть блок с подменю на всю ширину экрана .

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

Источник

Тюнинг резинового текстового поля

Ответ достаточно прост и решается следующим методом:

Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов полей (margin), будет равна:

width = width + padding-left + padding-right

Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:

Каждый контейнер выполняет свою роль:

1. input-width – этот контейнер задает результирующую ширину текстового поля;
2. width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.

Вот набор стилей, который разъяснит эту конструкцию:

Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin) должны быть равны padding-left и padding-right для элемента input.
При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.
Опишем по-новому исходный набор контейнеров:

В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width для контейнера input-width.

Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.

Источник

Why doesn’t the element respect min-width?

In the link above the textbox should have only 10px instead it has a width of 152px .

This is the code:

It looks like the input starts to get the correct width only after .main min-width is greater than 156px.

4 Answers 4

There is size=»20″ set on type text , search , tel , url , email , and password . by default, which is approximately of 100px width, although it can vary in a different browser and operating system.

On the parent, you have min-width:15px; set, that does not take any effects, because the value is much smaller than 100px . If you change it to width:15px; or max-width:15px; you will then see the differences.

Alternatively you can give the size a very small value such as size=»1″ .

You have a min-width set, but no max-width .

The textbook has a default size set by the browser. That default size in greater than the min-height , so the both the browser and the css are happy to let that default width take place and increase the width of the container.

By setting a max-width or a width for the container, the container’s and input’s size will be restricted and their sizes will be computed accordingly.

I think this is also what @sdcr answered and he also gave you details about the default size and computations.

Источник

Ширина input в зависимости от содержимого

Помощь в написании контрольных, курсовых и дипломных работ здесь.

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

Ширина контейнера в зависимости от содержимого
Имеем блок

Хидэр

Плавающая ширина блока div в зависимости от содержимого
Здравствуйте, помогите красиво решить задачу, которая прикреплена к вложению Моё решение ниже.

ширина блока в зависимости от его содержимого. как?

Отличное решение, спасибо Вам большое! Подскажите пожалуйста — в зависимости от чего генерируется начальная ширина? Ну то есть там почему-то внутри инпута справа большой отступ остается даже при наборе текста

И можно ли сделать так, чтобы была минимальная ширина? Просто если начинать набирать текст, то активный инпут как-бы резко «схлапывается» до одного символа + этот непонятный отступ справа

Mag_Lenny, это очень хороший вопрос. Сам как-то искал. Так и не нашел. В спецификации пишется, что браузер использует при анализе и рендеринге какое-то правило, чтобы убедиться что все символы будут видны. ПРУФ. Может поэтому.

Добавлено через 49 минут
rodigy, Mag_Lenny, нашел решение лучше

Добавлено через 2 минуты
Но к сожалению, с атрибутами maxsize и size — опять пустое пространство после строки.

Добавлено через 11 минут
А если лишний плагин не в тягость, то есть отличное решение на jQuery =>ТЫК 0

Источник