For some reason, when I apply spans the spans do not align themselves into a proper grid. It doesn't seem to matter what type of element I apply the span to, in this case it is inputs. I obviously want them to align themselves, what am I doing wrong?
Fiddle here: http://jsfiddle.net/fKQsj/
<div class="row-fluid">
<div class="span12">
<input type="text" class="span4" placeholder="First" />
<input type="text" class="span4" placeholder="Middle" />
<input type="text" class="span4" placeholder="Last" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<input type="text" class="span4" placeholder="City" />
<input type="text" class="span2" placeholder="State" />
<input type="text" class="span2" placeholder="Zip5" />
<input type="text" class="span4" placeholder="Store" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="span4 offset8">
<button class="btn btn-success pull-right">Search</button>
</div>
</div>
</div>
Taken from the manual
For multiple grid inputs per line, use the .controls-row modifier class for proper spacing.
It floats the inputs to collapse white-space, sets the proper margins, and clears the float.
Related
I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)
I try many as it seems only ways is a position to be fixed is there another way to do it?
Here the image
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
.flex{display: flex;}
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<div class="flex">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
</div>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</div>
I want to narrow the size of input boxes in the horizontal form.
I used col-sm-4 to make text boxes narrower.
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 control-label">date</label>
<div class="col-sm-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
For big size it works, however when I resize the form and make it smaller, suddenly, the length of input box will stretch and become larger. So for big screens the input will have 230px and for smaller screen it will have 608px
The fiddel http://jsfiddle.net/3YWkd/
I want that the size of text box remain the same during page shrink.
You just need to add the mobile (xs) classes, like so:
<div class="col-sm-4 col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
Or just leave the col-xs-4, no need for the sm in this case.
Edit:
Re: your comment, you may use slightly different html, like soQ
<div class=" form-group">
<div class="col-xs-2">
<label class="control-label" for="fromDate">date</label>
</div>
<div class="col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
</div>
fiddle
This should do it:
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 col-xs-12 control-label">date</label>
<div class="col-sm-4 col-xs-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
I have this problem - I need to make 3 INPUT, 1 wide (across the width of the screen) and below 2 small (exactly half the width of the first INPUT element), but it turns out that the size they are not the same. How to make an exact match width dimensions?
<form class="navbar-form">
<label>Where are you going?</label>
<input type="text" class="span8" data-provide="typeahead" data-items="5" placeholder="City, attraction, address, or airport">
<label>When?</label>
<input type="text" class="datepicker span4" id="dpd1" placeholder="Choose Arrive Date">
<input type="text" class="datepicker span4" id="dpd2" placeholder="Choose Depart Date">
</form>
you can see all code here
Maybe you can try something like this to avoid the extra space on inputs:
<div class="wrapper">
<div class="row-fluid">
<input class="span12"/>
</div>
<div class="row-fluid">
<div class='span6'>
<input class="span12"/>
</div>
<div class='span6'>
<input class="span12"/>
</div>
</div>
</div>
Demo
completely frustrated here with something that is probably so simple. I have a form and want the Zip and Zip+4 fields to be on the same line. For some reason nothing is lining up the way I've done it. I've spent the last 6 hours searching the web and trying various things (this latest was from this site) and nothing works. Can someone help me please? Thanks!
Here is my code:
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
Would this do the job for you? Please test it on multiple browsers
because it's only tested on FF 3.6, IE 7+
While the structure police are sure to pull me over for this, it is my considered opinion that using a table is the single most reliable way to line up elements in all browsers. Set the vertical-align:top and do what you need to do.
You can do something along this lines:
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
width: 300px !important;/* added important to override your inline styles*/
display: block !important;
text-align: right !important;
float: left;
}
</style>
</head>
<body>
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
</body>
</html>
The code you posted shows zip and zip+4 on the same line for me in Firefox, Chrome, and IE. Can you post a screen shot of how you see it differently and how you want it to look?