«Резиновое» поле ввода в форме
Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное.
Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id=”y-ks-whole-page”> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода.
И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно забытый (мною) Рамблер. Вёрстка как видите «резиновая» и соответственно ширина поля ввода для поиска такая же растягивающаяся.
Как же они сделали так, чтобы ширина была динамичной? Очень просто: таблицы. Создаётся таблица из одной строки и нескольких ячеек, в одной из которых помещается поле ввода и растягивается на всю ширину.
Это простейший путь. Но не самый лучший.
Вариант получше
Начнём со структуры. особо наворачивать не будем. Чем проще, тем лучше.
Проще некуда. на самом деле можно было бы обойтись без лишнего 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 этими дивами нужен мозг, который не всегда доступен.
И проще накатать таблицами.
Как говорил знакомый
))
»дизайнеры на дивах все еще парятся
а дизайнеры на таблицах – давно пьют кофе