I wanted to align input and select in same line , below code works in desktop but in mobile ,select list is coming down to new line even though I used col-sm.
Below is the form code
<form class="form-horizontal">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">name</label>
<div class="col-sm-5">
<input class="form-control" id="inputPassword3" placeholder="name" type="text">
</div>
<div class="col-sm-5">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</form>
And here is bootply http://www.bootply.com/9N0DxgUSMi
How about adding col-xs-5, and for example col-xs-12 to your password label? Should work :)
Related
Good day, I'm wondering why my button cannot do a submit inside phone browsers. Please take alook at my form
<form class="form-horizontal" method="POST" action="#" id ='form_id'>
<div class="form-group">
<label class="col-sm-3 control-label">Tipe</label>
<div class="col-sm-5">
<select onchange = 'by_brand();' name = 'tipenya' id="tipe" class="form-control select2">
<option value="">---</option>
<option value="AR-1">Naughty</option>
<option value="AR-6">Les Femmes</option>
<option value="AR-10">Matahari</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select onchange="brands();" name ='area' id="areanya" class="form-control select2">
<option value="">All</option>
<?php foreach ($area as $areanya) {?>
<option value="<?=$areanya->AreaCode;?>"><?=$areanya->Description;?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Outlet</label>
<div class="col-sm-5">
<select name='outlet' id="hsl" class="form-control select2">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-5">
<input type="text" class="form-control pull-right" readonly="readonly" placeholder="Tanggal" name="date_search" id="reservation" />
</div>
</div>
<div class="box-footer pull-right">
<input type="submit" class="btn btn-submit" />
</div>
</form>
It's working fine when i use any laptop. Can anyone help me?
Here is my full html code
http://pastebin.com/KCEQzW3e
First of all try using this to test if the sumbit actually works
<form action="javascript:alert("sumbit button works!");" id='form_id'>
if this doesnt work then there is something wrong with your form.
if this works. there is something wrong with the jquery function you used.
try using this to call a function if you click submit:
<form class="form-horizontal" method="POST" action="#" id ='form_id' onsubmit="myFunction()">
I hope this helps.
Is it possible to insert a form with select element inside horizontal form in Bootstrap.
I need to insert a form with select element inside form group.
Bootply code here
Note: Bootply messes the code and remove some form tags, so copy the code below.
The problem the element becomes not aligned. The two selects for Country and Language in the code not aligned and messes the code after them.
The code is here again:
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<form>
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</form>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<form>
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</form>
</div>
</div>
</form>
</div>
You have multiple <form></form> values in your code. Since this is only one form all you need is the form class at the beginning and the close at the end. This is why it's becoming misaligned. Check out my fiddle
http://jsfiddle.net/jxe78828/
According to the HTML5 specs, you can't nest one form inside another:
4.10.3 The form element
...
Content model:
Flow content, but with no form element descendants.
Bootstrap is designed with the assumption that you will be using valid HTML structure. So you may want to rethink your HTML structure and if there is another way to accomplish what you are trying to do with nested <form> elements.
Try this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</div>
</div>
</form>
</div>
You can also see my JSFiddle here
After a lot of search with people answering without reading the question clearly and misunderstanding what I need. Clearly the question means I need separate forms or sub forms inside forms, this can be possible with HTML 5 attribute form in this way:
<select name="country" id="country" class="form-control" form="country-form">
where you can just put empty form any where like this:
<form id="country-form"></form>
or even this form does not exist, the above form field will not be included anyway when submitting the container form.
I was hoping if someone can inform me what I need to do to get the placeholders in the input box for the dates to fit properly.
I've been playing around with the bootstrap code, but can't fit it in properly.
Here is my screen shot:
Here is my code using horizontal forms:
<div class="container nopadding">
<div class="form-group">
<label class="col-sm-2 control-label" for="txtPISIQueueManufacturer">Manufacturer:</label>
<div class="col-sm-2">
<input type="text" class="form-control height-auto" id="txtPISIQueueManufacturer" placeholder="Enter Manufacturer" />
</div>
<label class="col-sm-2 control-label" for="ddlPISIQueueRequestType">Request Type:</label>
<div class="form-group col-sm-3">
<select class="form-control" id="ddlPISIQueueRequestType">
<option>Shipping Information</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="form-group col-sm-8">
<label class="control-label col-sm-offset-1">Requested Date:</label>
<input class="height-auto" id="dtePISIQueueRequestedFromDate" placeholder="From Date" type="text" />
<span class="label label-default">To:</span>
<input class="height-auto" id="dtePISIQueueRequestedToDate" placeholder="To Date" type="text" />
</div>
</div>
Your problem lies in your css properties for your input type["text"] or date or any of the sort. Use your browser inspector and look for an excessive padding or line height in your input fields.
I have a forw, in which i need to display two field near each other: select + input. My code is:
<div role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter date" id="maps-filter-input-date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control" class="display-inline-block">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
Looks it like this:
With black color is show where it should be. So is it possible to do with default bootstrap classes?
From the Bootstrap doc:
Add .form-inline to your for left-aligned and inline-block controls.
You will also need to set custom width to your form elements, see details here
Change
<div class="form-group" id="maps-filter-select-track">
to
<div class="form-group form-inline" id="maps-filter-select-track">
here's bootply
http://www.bootply.com/e2BS204U7b
I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
Ok, this is how I would do it.
First add the form-inline class to your form.
Then remove the col-lg classes from labels and inputs.
Also remove all un-needed divs too, which results in the below html:
Markup
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...