UPDATE based on #HebleV:
I'm having a little issue with formating and trying to show html block in one row
Here is my html code
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
screenshot:
since you're using bootstrap,change your code to this..
<form action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="form-group" ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
this is my sample output
http://goo.gl/PYklyR
Add display:inline-block to your divs.
Maybe try placing them into "row" and "col"s? (I haven't checked that code, but you get the idea ;))
<div class="row">
<form class="navbar-form" role="search">
<div class="col-*-3"><div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/></div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div></div>
<div class="col-*-3">
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</div>
</form></div>
By "*" I mean md, lg etc. (you know, screen size thingies)
Since you are using bootstrap you can do the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/lightcast/6nwvnspd/
Remove input group for other 2 fields and include all 3 fields in one single- div class="input-group" check this http://codepen.io/anon/pen/YwRNPM
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div ng-show="selected == 'Employer Search'">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
Related
I am creating a inline form using the bootstrap template of MVC, but when i create an inline form with this code:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
this is the result:
how can achieve a inline form?
Add your button in form group
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<form class="form-inline">
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</form>
Try this.
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
Solved: JSfiddle
here is what I wanted, sample:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
</form>
.css:
.form-inline .form-group {
margin-left: 0;
margin-right: 0;
}
END
UPDATE:
I see where my problem is but i have form-horizontal that I want and if i change it to form-inline everything else is messed up please have a look at the updated jsfiddle
How do I make it inline in one row without spacing as shown in the screen shot:
<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
<div class="form-group col-md-12">
<label class="col-sm-3 control-label">Location</label>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
as you can see spacing between the input:
JSFiddle
Use form-inline instead of form-horizontal:
<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
<div class="form-group">
<label class="control-label">Location</label>
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
bootply
Simple calculation: col-sm-3 * 4 + col-sm-2 == col-sm-14 Which is not good. You should make sure that the total will not exceed 12 cols for each row.
Suggestion - change the first col-sm-3 to col-sm-1
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid
I want to align TextBox which will be used as Searchbox and button.
Problem is when I use inline form class on div the textbox is loosing its width.
<div class="col-lg-6">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<input type="button" value="Search" class="form-control btn-lg"/>
</div>
</div>
</div>
what I'm missing here..
here is a good solution for you:
Screenshot:
Code:
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E.g. Manchester" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
Result:
http://jsfiddle.net/j9EdZ/
You might be best using the col-md-* values here, e.g.:
<div class='col-lg-6'>
<form class='form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-10'>
<input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
</div>
<div class='col-md-2'>
<input type='button' class='form-control btn btn-block' value='Search'>
</div>
</div>
</div>
</form>
</div>
Text-box is not loosing its width you can check here.
CODE : http://jsfiddle.net/Jaysinh/awYm3/
As per the Bootstrap documentation of Form you have to set the width of the element. Default is 100 % wide.
Requires custom widths
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Here, check this out.
Demo
HTML
<div class="col-lg-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
</div>
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
<input type="button" value="Search" class=" btn btn-lg btn-default" />
</div>
<div class="form-group "></div>
</div>
</form>
</div>