«Резиновое» поле ввода в форме
Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное.
Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id=”y-ks-whole-page”> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода.
И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно забытый (мною) Рамблер. Вёрстка как видите «резиновая» и соответственно ширина поля ввода для поиска такая же растягивающаяся.
Как же они сделали так, чтобы ширина была динамичной? Очень просто: таблицы. Создаётся таблица из одной строки и нескольких ячеек, в одной из которых помещается поле ввода и растягивается на всю ширину.
Это простейший путь. Но не самый лучший.
Вариант получше
Начнём со структуры. особо наворачивать не будем. Чем проще, тем лучше.
<div class="form"> <fieldset> <input class="text-input" type="text" /> <input class="submit" type="submit" value="Continue →" /> </fieldset> </div>
Проще некуда. на самом деле можно было бы обойтись без лишнего div-а, если бы не Internet Explorer 6 и Firefox 2. Но об этом позже.
Перед описанием внешнего вида в CSS сначала нужно понять как предлагается решать задачу. Лучше всего показать схематически.
Из схемы видно, что предлагается контейнеру элементов формы добавить боковую границу шириной примерно равной кнопке отправки формы, а растягиваемое поле ввода предлагается растянуть на 100%. Ну и чтобы кнопка не перенеслась на следующую строку, контейнеру нужно запретить перенос строк.
.form fieldset{ border: none; border-right: 90px solid #fff; white-space: nowrap; } .form fieldset .text-input{ width: 100%; }
Этого достаточно, чтобы форма правильно работала в Firefox 3, Opera, Safari, Chrome и Internet Explorer 8.
Для IE 6 и 7 нужно подправить отображение кнопки:
.form fieldset .submit{ overflow: visible; }
А для того, чтобы в IE6 и FF2 контейнер не растягивался так, что появляется горизонтальная прокрутка, нужно внешнему div-у прописать следующие свойства:
.form{ overflow: hidden; width: 100%; }
Вот и всё, теперь у вас есть бестабличная вёрстка растягивающегося поля ввода.
Скачайте и посмотрите пример. Он немного приукрашен.
Пара нюансов:
- Вам нужно точно знать ширину кнопки.
- Для <div class=”form”> нельзя добавлять margin и padding по горизонтали, иначе будет сдвиг. Ну это вы и сами знаете.
Конечно же, никто не мешает вам добавить и левую границу и с отрицательным отступом поместить что-нибудь перед полем ввода (например логотип Яндекса).
Собственно, это я расписывать не буду, а просто посмотрите пример, как я сверстал ya.ru.
]]>Serhiy]]>Не плохо. Тоже стыкался с необходимостью растягивать поле поиска, на про border не додумался, видать через то что он не для этого предусмотрен
.
»]]>Sam]]>На картинке второй px вместо %.
»]]>Никита]]>Спасибо Sam, исправлю
»]]>Sam]]>Да, ещё круто было бы примеры выкладывать в не запакованном виде. Чтобы можно было посмотреть не отходя от кассы.
»]]>Alinaki]]>Спасибо! Я недавно как раз пытался решить точно такую же проблему, но остановился на табличном варианте. Переделаю
»]]>gordi]]>Красиво
»Но…
Хотелось бы пропорционального изменения размеров и поля ввода и самой кнопки.
При резиновых разметках это просто необходимо.
К тому же border не может быть “резиновым”.
]]>Sam]]>Кнопку тянуть? Зачем?!
»]]>gordi]]>Sam: “Кнопку тянуть…”
»Говорим о пропорциях
Скажем, есть у меня такая разметка http://trifler.ru/blog/i/layou....._lcr_c.htm
В колонках навигации может находится форма поиска по ресурсу.
Что будет поле ввода тянуться понятно, а вот кнопка останется прежнего размера и ни о каких пропорциях не и речи, а хотелось бы
Дискомфорт некий присуствует.
]]>Sam]]>У меня лично не будет никакого дискомфорта. Я знаю, что кнопка всегда справа. Там я её и ищу. По правому краю. А большая она или мелкая — не важно. Вот поле ввода — да, полезное пространство.
»]]>gordi]]>Sam: “У меня лично…”
»Александр, мы же не гворим у кого какие предпочтения
Вам может нравиться и так, и эдак, но хочется по возможности, идеального решения
Тем более, делаем в первую очередь для пользователя, а не для себя любимого
]]>Sam]]>А откуда известно, что пользователю надо растягивающуюся кнопку?
»]]>gordi]]>Sam: “А откуда известно…”
»Не знаю?
Также, как не знаю, а нужно ли ему растягивающееся поле ввода
Но если он растягивается, то пропорции, на мой взгляд, не плохо было бы соблюсти.
]]>Никита]]>gordi, Sam, это действительно интересный момент. Даже если не кнопку, а что-то другое. Можно подумать на эту тему. Конечно, идеально бы подошло display: table-cell, но к сожалению с его поддержкой слабовато…
»]]>gordi]]>Никита: “…это действительно интересный момент…”
»Сам на эту тему давно размышляю
Но тут есть засада – разметка резиновая, а как быть с размером шрифта,
чтобы и он адаптировался по разрешение и размер диагонали монитора “автоматом”
и под меняющуюся ширину колонок тоже.
Вот одна из моих попыток: http://trifler.ru/blog/i/control/lcr_b_font.htm
]]>Никита]]>gordi, кошмар, сколько у вас хакков.
»На самом деле, вариант с растягивающейся кнопкой очень простой. Достаточно прописать ширину для первого input-a например 80%, а для второго — 20%. Здесь проблемы нет.
]]>gordi]]>Это черновик, но попытка сделать полную визуальную идентичность макета с плавющей шириной колонок, в популярнух браузерах, а тут только проценты рулят, приводит к этому кошмару
»Тема вашей статьи, это частный случай, в случае глобальной разметки страницы, не все так просто
]]>gordi]]>Никита: “На самом деле…”
»Ваша статья частный случай.
Приглобальной разметке страницы, где все колонки имеют плавающую ширину, не все так просто
]]>Никита]]>Ладно, попробую, дам знать.
»]]>Dmitry Dulepov]]>Очень полезная статья. Люблю, когда сделано качественно.
Добавил в букмарки
»]]>malevi4]]>Благодарности! заюзал на http://picfor.me
»]]>софт, хард & интERнет » Порция знаний о Wordpress]]>[...] Подсмотрел у Никиты Селецкого, как сделать поле ввода «резиновым». Принял на вооружение. Add to Social [...]
»]]>Tim]]>>Благодарности! заюзал на http://picfor.me
классно
только поле и инпуты у вас не стандартной высоты … как следстивие кнопка search уезжает вверх
описанный подход не подходит , если вы собрались менять высоту поля и кнопки
»]]>TRSteep]]>C этими дивами нужен мозг, который не всегда доступен.
И проще накатать таблицами.
Как говорил знакомый
))
»дизайнеры на дивах все еще парятся
а дизайнеры на таблицах – давно пьют кофе