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>
Related
I have the a textbox used as a search field as follows that I want to align to the right:
<div class="col-md-6 search-form" style="padding:13px 0;">
<form action="/search" method="post">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
</div>
I tried surrounding it with another div to attempt to do so using text-align as shown below but it didn't align exactly where I want it
.new-search-div {
display: inline-block;
text-align: right;
}
Here's a screenshot of where I am trying to align it...
text-align:right; will only right align text elements.
It appears that your are using bootstrap. You could try giving your form a class of pull-right, which is a bootstrap class for float right.
<form action="/search" method="post" class="pull-right">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
Don't use align:right;, there's no such CSS rule, use float:right; instead.
(The element will be aligned to the right of the parent element, so you might need to apply that on the parent form instead, if you don't see it changing.)
Already tried to give the Input a float: right; ?
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.
I have this code below which I have built in order for it to be ALL on the same line. Problem is, for some reason the form input field is several spaces away from the label. Thus something like this happens:
https://jsfiddle.net/pswLLhru/
Any help so as to remove the extra spacing between the two input fields?
Thank you
label {
display:inline-block;
width: 130px;
}
<div class="block">
<label>Currently I am </label>
<input type="text" id="labelinput" style="width:60px;"/>
<label> in </label>
<input type="text" id="labelinput" style="width:60px"/>
</div>
Just deleting your CSS:
label {
display:inline-block;
width: 130px;
}
will remove the white space from your inputs and show your div with the 2 inputs on the same line.
Also I would recommend indenting your code to make it easier to read in larger/future projects.
Delete the width in your css and use comments in your markup
<div class="block">
<label>Currently I am </label><!--
--><input type="text" id="labelinput" style="width:60px;"/><!--
--><label> in </label><!--
--><input type="text" id="labelinput" style="width:60px"/>
</div>
I want to display textbox first and then button.But now button appears first.I attached css code and html
css
.search,.stxt{
float: right;
}
html
<form method="POST">
<p style="align:right;">
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search" class="search">Search</button></p>
</form>
The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.
I would recommend wrapping your elements within a div and having that float to the right instead.
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
So add the same class for both elements like below
HTML:
<form method="POST">
<p style="align:right;">
<input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search alignLeft" class="search">Search</button></p>
</form>
And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:
.alignLeft{
float: left;
}
p{
margin-left: 290px;
}
Fiddle:http://jsfiddle.net/gvmtuo5j/1/
Alternative:
Try Like this:
.search,.stxt{
float: left;
}
p{
margin-left: 290px;
}
check out this fiddle:http://jsfiddle.net/gvmtuo5j/
Just move the button before your input text :
<form method="POST">
<p style="align:right;">
<button name="search" class="search">Search</button></p>
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>
Or the simpliest way is to put the float right on your <p> tag and remove the others float right
I want to have two elements stay on the same row.
Right now I have this code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</fieldset>
This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?
You need to override the jQM enhancements:
http://jsfiddle.net/E4EVT/10/
http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
http://jsfiddle.net/E4EVT/42/ (Using the table layout)
JS
$('#textinput2').css('width','60%').css('display','inline');
HTML
<div>
<!-- use span instead of label -->
<span>Text:</span>
<input type="text" id="textinput2"/>
<br />
<input type="button" id="searchbutton2" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
I think you might want to look into the grid layout jQM offers
http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
For Jquery Mobile 1.2.0
<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>
you need to add attribute data-inline="true" to the input elements.
CSS:
label {
display: block;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
width: 212px; /* the width of twice your input (plus borders) */
}
And your HTML:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<div class="wrap">
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
</fieldset>
http://jsfiddle.net/ahallicks/BWsdk/
Edit:
Sorry, misread your question! If you want them all on the same line to start with use the following CSS:
label {
float: left;
margin-right: 12px;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
float: left;
width: 212px; /* the width of twice your input (plus borders) */
}
http://jsfiddle.net/ahallicks/E4EVT/