Помогите настроить форму поиска на бутстрапе 3

Den1xxx

Den1xxx

Постоялец
Регистрация
15 Янв 2014
Сообщения
290
Реакции
168
Здравствуйте.
У меня не получается на сайте решить проблему с поиском на бутстрапе, пробовал по-разному, но не получилось. Хочется раздвинуть ввод для поиска на всю доступную длину родителя, не знаю как.
Помогите, пожалуйста, буду благодарен.
Сама форма:
HTML: 
<div class="row form-inline">
    <form role="form" class="" action="<?=$tpldata['action']?>" method="POST" >
        <div class="form-group">
            <select name="search_category" class="form-control input-block">
            <option value="0">Все категории</option>
            <option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Недвижимость</option>
            <option value="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Дачи, коттеджи</option>
            <option value="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Земельные участки</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Комнаты, Квартиры</option>
            </select>
         
            <select name="new_region" class="form-control input-block">
            <option value="0">Все регионы</option><option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Беларусь</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Брестская область</option>
            <option value="5" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Витебская область</option>
            <option value="6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гомельская область</option>
            <option value="7" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гродненская область</option>
            <option value="8" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минская область</option>
            <option value="9" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Могилевская область</option>
            </select>
        </div>
        <div class="form-group input-group input-block">
            <input class="form-control" type="search" value="" name="search" placeholder="Найти объвление" required="required" />
            <div class="input-group-btn">
                <button class="btn btn-warning" type="submit" value="Поиск">Поиск</button>
            </div>
        </div>
    </form>
</div>


Как выглядит и что нужно сделать:
expand_input.png
Нужно расширить <input name="search"> (там, где «Найти объявление») так, чтобы он занял максимальную ширину, на всю оставшуюся ширину родителя, но при этом остался на одной строке с остальными элементами.

Код на jsfiddle:
Для просмотра ссылки Войди или Зарегистрируйся
Для понимания проблемы нужно развернуть фрейм с результатом на максимальную ширину.
 
Последнее редактирование:
Вот так?
Код: 
http://bootsnipp.com/snippets/featured/expandable-search-input

+ в css сделайте

HTML: 
    .search-query:focus{
        width: 100%;
    }
 
D'Jack написал(а):
Вот так?
Код: 
http://bootsnipp.com/snippets/featured/expandable-search-input

+ в css сделайте

HTML: 
    .search-query:focus{
        width: 100%;
    }
Нажмите для раскрытия...
Нет, не так.
1. Нужно не при фокусе, а постоянно.
2. Ваш код не сработает, так как в ряду в моем варианте в строке инпуту будут мешать другие элементы.
Вы бы попробовали на Для просмотра ссылки Войди или Зарегистрируйся прежде чем писать.
 
этож бутстрап - используйте классы разметки
Код: 
<div class="row">
        <div class="form-group col-sm-7 col-md-7">
            <select name="search_category" class="form-control input-block">
            <option value="0">Все категории</option>
            <option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Недвижимость</option>
            <option value="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Дачи, коттеджи</option>
            <option value="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Земельные участки</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Комнаты, Квартиры</option>
            </select>
         
            <select name="new_region" class="form-control input-block">
            <option value="0">Все регионы</option><option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Беларусь</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Брестская область</option>
            <option value="5" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Витебская область</option>
            <option value="6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гомельская область</option>
            <option value="7" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гродненская область</option>
            <option value="8" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минская область</option>
            <option value="9" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Могилевская область</option>
            </select>
        </div>
        <div class="form-group input-group input-block col-sm-5 col-md-5">
            <input class="form-control" type="search" value="" name="search" placeholder="Найти объвление" required="required" />
            <div class="input-group-btn">
                <button class="btn btn-warning" type="submit" value="Поиск">Поиск</button>
            </div>
        </div>
</div>
 
sol_los написал(а):
этож бутстрап - используйте классы разметки
Код: 
<div class="row">
        <div class="form-group col-sm-7 col-md-7">
            <select name="search_category" class="form-control input-block">
            <option value="0">Все категории</option>
            <option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Недвижимость</option>
            <option value="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Дачи, коттеджи</option>
            <option value="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Земельные участки</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Комнаты, Квартиры</option>
            </select>
       
            <select name="new_region" class="form-control input-block">
            <option value="0">Все регионы</option><option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Беларусь</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Брестская область</option>
            <option value="5" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Витебская область</option>
            <option value="6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гомельская область</option>
            <option value="7" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гродненская область</option>
            <option value="8" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минская область</option>
            <option value="9" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Могилевская область</option>
            </select>
        </div>
        <div class="form-group input-group input-block col-sm-5 col-md-5">
            <input class="form-control" type="search" value="" name="search" placeholder="Найти объвление" required="required" />
            <div class="input-group-btn">
                <button class="btn btn-warning" type="submit" value="Поиск">Поиск</button>
            </div>
        </div>
</div>
Нажмите для раскрытия...
А щас поля больше 100%... И куда подевалась форма сама? без неё ж не отправится ничего на сервер...
Спасибо за желание помочь, но Вы б хоть посмотрели, работает ли Ваше решение...
Если б всё было просто, б не создавал топик со скринами, примерами кода на jsfiddle, а уже давно бы написал...
 
Последнее редактирование:
Den1xxx написал(а):
А щас поля больше 100%... И куда подевалась форма сама? без неё ж не отправится ничего на сервер...
Нажмите для раскрытия...
японамать уже не можете заменить Html правильно - а ну ко брысь на сайт бутстрапа смотреть примеры верстки

Код: 
<div class="form-inline">
    <form role="form" class="" action="<?=$tpldata['action']?>" method="POST" >
       <div class="row">
        <div class="form-group col-sm-7 col-md-7">
            <select name="search_category" class="form-control input-block">
            <option value="0">Все категории</option>
            <option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Недвижимость</option>
            <option value="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Дачи, коттеджи</option>
            <option value="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Земельные участки</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Комнаты, Квартиры</option>
            </select>
        
            <select name="new_region" class="form-control input-block">
            <option value="0">Все регионы</option><option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Беларусь</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Брестская область</option>
            <option value="5" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Витебская область</option>
            <option value="6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гомельская область</option>
            <option value="7" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гродненская область</option>
            <option value="8" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минская область</option>
            <option value="9" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Могилевская область</option>
            </select>
        </div>
        <div class="form-group input-group input-block col-sm-5 col-md-5">
            <input class="form-control" type="search" value="" name="search" placeholder="Найти объвление" required="required" />
            <div class="input-group-btn">
                <button class="btn btn-warning" type="submit" value="Поиск">Поиск</button>
            </div>
        </div>
</div>
    </form>
</div>
 
Последнее редактирование:
sol_los написал(а):
японамать уже не можете заменить Html правильно - а ну ко брысь на сайт бутстрапа смотреть примеры верстки

Код: 
<div class="form-inline">
    <form role="form" class="" action="<?=$tpldata['action']?>" method="POST" >
       <div class="row">
        <div class="form-group col-sm-7 col-md-7">
            <select name="search_category" class="form-control input-block">
            <option value="0">Все категории</option>
            <option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Недвижимость</option>
            <option value="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Дачи, коттеджи</option>
            <option value="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Земельные участки</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Комнаты, Квартиры</option>
            </select>
       
            <select name="new_region" class="form-control input-block">
            <option value="0">Все регионы</option><option value="1"  disabled="disabled">&nbsp;&nbsp;&nbsp;Беларусь</option>
            <option value="4" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Брестская область</option>
            <option value="5" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Витебская область</option>
            <option value="6" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гомельская область</option>
            <option value="7" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гродненская область</option>
            <option value="8" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минская область</option>
            <option value="9" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Могилевская область</option>
            </select>
        </div>
        <div class="form-group input-group input-block col-sm-5 col-md-5">
            <input class="form-control" type="search" value="" name="search" placeholder="Найти объвление" required="required" />
            <div class="input-group-btn">
                <button class="btn btn-warning" type="submit" value="Поиск">Поиск</button>
            </div>
        </div>
</div>
    </form>
</div>
Нажмите для раскрытия...
Во-первых, хамить не надо. Во-вторых, Ваш код не работает так, как надо. Удосужьтесь сами проверить, прежде чем психовать.
Открываем, смотрим: Для просмотра ссылки Войди или Зарегистрируйся
Скриншот:
jsfiddle_nw.png
Такой эффект сдвига вправо можно было получить гораздо проще — например pull-right добавить.
А вот то, ради чего затевалось, не решено. Научитесь уже проверять, что пишете, ей-богу.

Пока все эти ухищрения ни к чему не приводят. Не работает даже железный костыль style="width: 100% !important;"
 
Den1xxx написал(а):
Во-вторых, Ваш код не работает так, как надо. Удосужьтесь сами проверить, прежде чем психовать.
Нажмите для раскрытия...
вы пользоваться инструментами разработчика умеете?

если умеете - воспользуйтесь и увидите что инпут растягивается на всю ширину класса form-group input-group, а пустоту создают соседние элементы

я привел как пример использовать классы, вам же нужно было довести до ума свою верстку.
Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
надеюсь сами найдете ошибку

и не стоит проверять верстку где используются медиа запросы на ресурсах вроде Jsfiddle, т.к. они неверно получают информацию о размере экрана
 
Последнее редактирование:
sol_los написал(а):
вы пользоваться инструментами разработчика умеете?

если умеете - воспользуйтесь и увидите что инпут растягивается на всю ширину класса form-group input-group, а пустоту создают соседние элементы

я привел как пример использовать классы, вам же нужно было довести до ума свою верстку.
Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
надеюсь сами найдете ошибку

и не стоит проверять верстку где используются медиа запросы на ресурсах вроде Jsfiddle, т.к. они неверно получают информацию о размере экрана
Нажмите для раскрытия...
Я умею пользоваться инструментами разработчика. За упорство Вам плюс, но вопрос Вы не решили.
Я так, как Вы, пытался делать 2 дня назад, потом уже создал тему.
И на jsfiddle зря грешите. И там, и на реальном сайте всё одинаково.
Вопросиками я отметил те пустые места, от которых я пытался избавиться:
rum_qa.png
В моём решении в 2 местах пустого места уже не было, и было выравнивание по левому краю.
В Вашем они появились.
 
Den1xxx написал(а):
В моём решении в 2 местах пустого места уже не было, и было выравнивание по левому краю.
Нажмите для раскрытия...
вот в инструментах, опять таки, обратите внимание что создает это пустое место. например в поиске создает кнопка поиска, а значит нужно решать проблему с ней
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху