I'm trying to make a search bar for an ebay-type website, but for some reason, the submit button takes the column size of the previous asset, and also goes directly under this asset.
CODE
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</body>
You forgot to close <select>. You can reduce border-radius of input to get it more closer like ebay.
.NoPadding{
padding:0 !important;
}
input,select{
border-radius:1px !important
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-3 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</select>
</div>
<!-- BUTTON -->
<div class="col-sm-2 frm-group ">
<input type="submit" class="form-control btn-primary">
</div>
</form>
</div>
</body>
You simply didn't close select and div.form-group
Also, I would suggest adding col-md-#, where # is a number.
See here for the closed tags: https://jsfiddle.net/8z7cL5x0/
Try wrapping your columns in a div with class "row":
<body>
<div class="container">
<div class = "row">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</div>
</body>
Related
I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.
What am I missing?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<p align="center" style="color:red">
Open Store
</p>
<div class="OpenStore">
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Here is what it looks like in chrome:
html render
The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.
<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
style="width:100px">
<option data-value="English">English</option>
<option data-value="French">French</option>
</select>
The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.
Please use the <select></select> instead of <select/>
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
I have a filter form at the top which looks like this
and like this in the Mobile Layout
This is my code
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
What can I do with this? I would like it if the search box and the 2 buttons come beside it on the same line without being floated to right but the mobile layout is all messed up. Any suggestions are welcome. Thanks!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
UPDATE
Thank you all for your answers. I have upvoted the answers that helped me get what I wanted. However, I ended up doing something of my own.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="input-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="<?php echo ($this->input->get('search',true)); ?>">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</span>
</div>
</div>
set width:auto;display: inline-block; to input text field
check this fiddle:
https://jsfiddle.net/DTcHh/30416/
Try change to only "col-sm-6" and the class named "pull-right" and add "float-right".
Look at this: https://jsfiddle.net/ceqvpu01/1/
input[type="text"] {
display: inline-block;
width: 100%;
}
#media (min-width: 768px) {
.float-right{
float: right;
}
}
thats because you put the 'col-xs-12' on both form. so each form will takes all of the grid system (12) and the second form will be put below the first because there is no more grid for it. try changing your col-xs-12 to col-xs-6 for both form
Like this? I added col-sm-6 to both, and changed col-xs-12 to col-xs-6
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
I want to make below search box with select box in center of the page and all the field are stick to each other. I tried using margin-left. But i think this is not proper way to do this. please help me to do this to get all are in center with responsive.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12">
<form action="#" method="get" id="search_mini_form">
<div class="col-md-1 catnames">
<select name="cat" class=" search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-1 catnames catnames-arrow ">
<select name="cat" class="search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-4 catquery">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off">
</div>
<div class="col-md-1 catsubmit">
<div class="row">
<i class="fa fa-search"></i>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<div>
</div>
</div>
You can do by applying some Bootstrap classes
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12">
<form action="#" method="get" id="search_mini_form">
<div class="col-md-1 col-sm-2 form-group col-sm-offset-2 col-md-offset-3 col-xs-12 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-1 col-sm-2 form-group catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-4 col-sm-4 form-group col-xs-12 catquery">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" class="form-control" >
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<div>
</div>
</div>
try to change classes of whole container:
<div class="col-md-12 ">
to:
<div class="col-md-4 col-md-offset-4">
You can also add styles for every element inside, like this:
text-align: center;
margin: 0 auto;
I made a little fiddle to demonstrate how to do this: https://jsfiddle.net/2nhzytu5/
To make the fields float in the center regardless desktop or mobile version, you can use col-offset-xx (Learn more here)
Then, to make them stick together, you should use bootstrap's input-group class. (More info here )
So this would be your base:
<form class="form-horizontal">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<!-- Your fields here -->
</div>
</div>
</form>
Now simply add your fields:
<form class="form-horizontal">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<select id="yourId" class="selectpicker form-control" title="Please select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="yourId2" class="selectpicker form-control" title="Please select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" class="form-control" name="snpid" placeholder="Test">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</form>
Avoid using elements here as they cannot be fully styled in WebKit browsers.
Is this what you want ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
here is jsbin
Hi how will I reduce the distance of the two dropdowns between each other?
Here is the code:
<div class="row">
<p class="col-md-offset-1"><b>Type of Meal:</b></p>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
</div>
Thanks!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Starfleet officer</p>
<form class="form-inline">
<select class="form-control form-group">
<option>Spock</option>
<option>Kirk</option>
</select>
<select class="form-control form-group">
<option>Picard</option>
<option>Riker</option>
</select>
</form>
</div>
<div class="col-md-8">
</div>
</div>
</div>
Hi Everyone I am having an issue where I have a Modal window that has two legend tags. The Line under the Legend tag goes outside the modal window.
When I use the same code outside of a modal window it looks fine. I am sure it is something simple that I just cannot see at this point.
This is just a test so the html is quite ugly..
I have created this jsfiddle! to demonstrate the issue
Here is the relevant code
<div class="container">
<!-- Email Row -->
<div class="form-group">
<fieldset>
<legend>Login Information</legend>
<div class="row">
<form class="form-inline" role="form">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="email" class="form-control" id="inputEmail1" placeholder="Primary Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="email" class="form-control" id="inputEmail1" placeholder="Secondary Email">
</div>
</div>
</form>
</div> <!-- End Row -->
</fieldset>
</div> <!-- End Form-Group. This adds the space between the rows -->
<!-- Primary Phone -->
<div class="form-group">
<fieldset>
<legend>Phone Details</legend>
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="(999) 999-9999" placeholder="Primary Phone" />
</div>
</div>
<div class="form-group">
<label for="selectUser">Carrier </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">AT&T</option>
<option class="">Verizon</option>
<option class="">T-Mobile</option>
<option class="">Sprint</option>
</select>
</div>
<div class="form-group">
<label for="selectUser">Arrival Notifications </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">All Arrivals</option>
<option class="">None</option>
<option class="">Vendors Only</option>
</select>
</div>
</form>
</div> <!-- End Row -->
</div> <!-- End Form-Group. This adds the space between the rows -->
<!-- Secondary Phone -->
<div class="row">
<form role="form" class="form-inline">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="form-control" id="primary_phone" name="primary_phone" type="text" data-mask="(999) 999-9999" placeholder="Secondary Phone" />
</div>
</div>
<div class="form-group">
<label for="selectUser">Carrier </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">AT&T</option>
<option class="">Verizon</option>
<option class="">T-Mobile</option>
<option class="">Sprint</option>
</select>
</div>
<div class="form-group">
<label for="selectUser">Arrival Notifications </label>
<select id="selectUser" class="form-control selectWidth">
<option class="">All Arrivals</option>
<option class="">None</option>
<option class="">Vendors Only</option>
</select>
</div>
</form>
</div> <!-- End Row -->
</fieldset>
</div> <!-- End Container -->
You have a <div class="container"> in your modal to which bootstrap gives a responsive width which can be wider than the modal, depending on viewing size. If you remove either the container class or the div then your legend should act as expected. Please note that this will cause your "phone details" forms to wrap.