I'm using the css form styles from Twitter Bootstrap but I would like to decrease the default spacing between the form input fields. Not sure which css element I need to overwrite.
Any ideas?
When using Bootstrap v2.1 I use their horizontal forms to reduce the height of my forms, I then find altering the .control-group bottom margin can give the desired effect.
Default is 20px I beleive, I use 8px
.form-horizontal .control-group {
margin-bottom: 8px;
}
If you're working with the default setup you can decrease the .line margin to achieve your goal. Try this:
form .line {
margin-bottom: 5px; //adjust to your liking
}
This is of course if you're working with an input field separated by the line div that the bootstrap uses, e.g.:
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" name="input" size="30">
</div>
</div>
<div class="line">
<label for="input">Last Name</label>
<div class="input">
<input type="text" name="input" size="30">
</div>
</div>
...
Demo http://jsfiddle.net/andresilich/qxMVd/1/
Related
I have some difficulties positioning two elements on the right side of the page. Strangely the suggested answers of similar questions did not work at all or gave poor results, but most of them were correct if I used simpler elements like text-fields for example.
The view is:
Here's what I have:
input, select, textarea {
max-width: 280px;
text-size-adjust: auto;
}
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
I have tried to adjust the position with float: right and by using the bootstrap grid system.
I assume you have somehow set your input-group to have a fixed width, instead of the default 100%. Otherwise it doesn't make sense to talk about positioning.
In any event, bootstrap has a pull-right class you can use in order to float elements to the right. Just add it to your first div.
.input-group {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group pull-right">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
Have a read about this on the official docs, here
try this one:
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
DEMO
or
.input-group-addon {
min-width:100px;
text-align:left;
}
DEMO HERE
group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:
<form>
<div class="form-group">
<label for="input">Please enter names, separated by space:</label>
<div>
<div class="col-xs-8">
<input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
</div>
<div class="block-align-right">
<button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
</div>
</div>
</div>
</form>
The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!
Use this type
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Add class to label. like:
<label class="col-xs-10" for="input">Please enter names, separated by space:</label>
Will solve your issue.
Because bootstrap class will add padding-left:15px.
Check image below.
Working Fiddle
Seems like you are using bootstrap. Just modify the <label> line as follows:
<label for="input" class="col-xs-12">Please enter names, separated by space:</label>
I have the following HTML:
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
</div>
<div class="form-group">
<button class="btn btn-default">Add</button>
</div>
</form>
The issue I am facing is that these two elements aren't taking the entire line (they aren't touching). See here:
Why is this the case?
Here is a fiddle show casing the problem: https://jsfiddle.net/nirchernia/pyfetd4p/
A couple of things:
form-group is display:block.
put both the input and button tag inside the same form-group
The form-control is a display:block as well. Use CSS to force it to display:inline-block and shorten the width (it was 100%).
jsfiddle: https://jsfiddle.net/b6x12fc8/
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
<button class="btn btn-default">Add</button>
</div>
.form-inline .form-control { width:75%; display:inline-block;}
Give following css. Because currently it will taking width:auto; So, it will take default width of input field.
To make it touch with button. Give 100% and there is padding given so, it will increase more width and overlap the button. So, remove padding but padding:0
.form-inline .form-control {
padding: 0;
width: 100%;
}
https://jsfiddle.net/pyfetd4p/1/
To make side by side in small screen use following css;
.form-inline {
display: flex;
}
Fiddle link
I have an html which contains 1 label and 1 div box contains a text.
<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
<strong>Test</strong>
</div>
But they seem not located on the same line. Here is the jsfiddle Could anyone help me how can I align them on the same line.
Thanks
I see you are using bootstrap. Bootstrap already has default CSS for labels. so if you don't want that to happen remove the padding from the <label> element.
It will look like this:
.form-horizontal .control-label {
float: left;
width: 160px;
/* padding-top: 5px; */
text-align: right;
}
Hope this helps, Cheers.
Apply padding-top to the col-xs-10 in your CSS.
.col-xs-10 {
padding-top: 5px;
}
Try this
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
<strong>Test</strong>
</div>
</div>
</div>
In bootstrap if you would like to have a horizontal form it is called inline. So, if you change your "form-horizontal" to "form-inline" you will achieve that horizontal key/value pair. Below is the html that I changed to your code. I hope this is what you are looking for.
<div class="form-inline" role="form">
<div class="form-group">
<label for="control-label col-xs-12">Name:</label>
<input type="text" class="form-control col-xs-10" id="control-label"placeholder="text here">
</div>
</div>
In addition, you will notice that I have inserted an input tag. This is what will allow site visitors to input the value.
who can tell me why the radio button has this strange behaviour as you can see in the picture?
it's not aligned correctly.why there is that line? I didn't applied any css style.
here it is the html code:
<div class = "ui-grid-a">
<div class = "ui-block-a">
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" style="width: 50%"/>
</div>
</div>
<div class = "ui-block-b">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="male" id="male" value="male" />
<label for="male">M</label>
<input type="radio" name="female" id="female" value="female" />
<label for="female">F</label>
</fieldset>
</div>
</div>
</div>
It appears as if the CSS controlling the fieldset surrounding your radio buttons is the culprit. I pulled the following from the default jQuery Mobile CSS.
.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
There is a top margin of .5em and a bottom margin of 1em. Adjust those to see if it makes any difference at all.
Without seeing the css I can't say for sure, but it looks like you have a default margin set on that radio button. Try resetting it with this:
input {
padding: 0;
margin: 0;
}
JqueryMobile automatically adds margins to the constructs it creates. I'm guessing the fieldset tags or the radio buttons themselves have additional margins from the conversion. Try adding a height property to the parent div and see if that works.
Also, the line appears when you have a narrow viewport when you use the data-role="fieldcontain". If the viewport is wider, it automatically disappears. It's JqueryMobile's way of organizing stuff around. It's usually used to group a label and its control together, so you might get a better result by not using one in that particular row of controls.