I am trying to align text fields in a div and make them float left so that they look like a table.
I want a layout like below:
Label1: TextField Label2: TextField Label3: TextField
Label4: TextField Label5: TextField Label6: TextField
I tried to do this but it just won't come out correct. http://jsbin.com/izuwi3/edit
I put this together really quickly, so it can definitely be improved upon, but how about something like this?
http://jsfiddle.net/LBcp5/1/
What I'm doing is essentially creating a container for what would be a row in a table. The way I'm doing this is as follows:
<div class="row">
// put whatever you want in here
</div>
... and I'm styling this row class with clear: both so that each row will be on its own line. You can add <div> elements within each row, as many as you want, and floating them to the left or using display: inline to get the effect you want.
So when you want multiple rows, you create multiple of these row containers. Check out the jsFiddle demo above for an example.
I hope this helps.
Maybe you are looking for something like this?
HTML:
<form>
<div id="wrapper">
<div id="left">
<div class="label-container">
<label for="label1">Label1</label>
<input name="label1" type="text">
</div>
<div class="label-container">
<label for="label4">Label4</label>
<input name="label4" type="text">
</div>
</div>
<div id="center">
<div class="label-container">
<label for="label2">Label2</label>
<input name="label2" type="text">
</div>
<div class="label-container">
<label for="label5">Label5</label>
<input name="label5" type="text">
</div>
</div>
<div id="right">
<div class="label-container">
<label for="label3">Label3</label>
<input name="label3" type="text">
</div>
<div class="label-container">
<label for="label6">Label6</label>
<input name="label6" type="text">
</div>
</div>
</div>
</form>
CSS:
#wrapper
{
width: 800px;
}
#left,
#center,
#right
{
float: left;
}
.label-container
{
margin: 10px 10px;
}
:)
Well, you can for example put each column in a fieldset tag, set it's display attribute to block, float to left and set width to desired value.
i think it'll allways end using some tag like span or div to group those fields, however the fieldset tag is the most desired one cause it's invented exactly for grouping form fields :)
you can do this:
<div style="clear:both;">
<div style="float:left;">
<label for="TextField1">Label1:</label>
<input id="TextField1" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField2" style="padding-left:50px">Label2:</label>
<input id="TextField2" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField3" style="padding-left:50px">Label3:</label>
<input id="TextField3" value="TextField"></input>
</div>
</div>
<div style="clear:both;">
<div style="float:left;">
<label for="TextField4">Label4:</label>
<input id="TextField4" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField5" style="padding-left:50px">Label5:</label>
<input id="TextField5" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField6" style="padding-left:50px">Label6:</label>
<input id="TextField6" value="TextField"></input>
</div>
</div>
Use this html tag
align="center"
center can be substituted for left or right if you want not to position them on the center
The proper way to do it is by linking your html to a CSS file and assign each div to a certain type of class in the CSS file, this helps you avoid redundancy. To do so create a css file and
link it to the html by including this in your html code
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
And then in your mystyle.css file you would have to include something like this
DIV.Left{text-align:left;}
DIV.Center{text-align:center;}
DIV.Right{text-align:right;}
Then your html file divs would look like
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
Related
I have this code:
<div class="well">
<form role="form" id="shop-order" method="post" action="">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="pull-right">
<label for="name">Label</label>
</div>
</div>
<div class="col-md-6">
<select class="form-control" name="clientId">
$options
</select>
</div>
</div>
</div>
// possibly other rows...
</div>
The result of this code is on this image:
I don't get how I can center label and input in a row. I want them on one line: middle of label opposite middle of input.
How I can do this? Or probably I my html is wrong and this can be achieved by correct html?
I am looking for bootstrap method, I understand, that it can be achieved by line-height. I will do it by line-height if I wouldn't find bootstrap solution. So I am looking for bootstrap solution.
JSFiddle demo
Bootstrap provides a Horizontal Forms style that seems like what you're looking for: http://getbootstrap.com/css/#forms-horizontal
Working Fiddle: http://jsfiddle.net/Nv9Q5/1/
Code:
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
<div class="col-sm-10 col-md-10">
<select class="form-control" name="clientId">
<option>one</option>
</select>
</div>
</div>
</form>
</div>
Set the css line-height of the label to match the height of the input. You'll have to play around to find the right value.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Input elements are already inline level element. If you add text-align:center to the parent div it will automatically float to the center.
EDITS
If you want to center it vertically, you need to add one more div wrapping the input box
<div class="vertically_center">
<input type="text">
</div>
CSS
.vertically_center {
display: table-cell;
height: 200px;
vertical-align: center;
}
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
Hello I have a layout similar to the one above. I have some other things in the php file, but they are irrelevant. For example every new 5th element causes a new line (br), which will make sense when you see the pictures.
Here is an image representation of the outcome:
This is what I need :
How can I possibly do this, I will appreciate any idea. Cheers.
Note: Span tags contain the text next to the radio buttons.
iyi akşamlar :) you can remove div's, create class inside radio buttons and put them altogether into container for each row.
LIVE DEMO HERE
<div class="container">
<input type="radio" class="radyo">
<div class="text">a2</div>
<input type="radio"class="radyo">
<div class="text">a3</div>
<input type="radio"class="radyo">
<div class="text">a4</div>
<input type="radio"class="radyo">
<div class="text">a5</div>
</div>
<div class="container">
<input type="radio"class="radyo">
<div class="text">beyler ben geldim</div>
<input type="radio"class="radyo">
<div class="text">tamam</div>
</div>
First of all, avoid using inline styles.
If you want the result in the second image, simply define width for each element instead of margin.
<div style="display:inline-block; margin-left:10%; width:15%;">
or set the margin-left and width as you see fit.
I'd suggest a nested div pattern, where you can utilize precised columns without margin/padding and insert a div that hold the margin/padding as desired. Then push your checkboxes into each nested div. I'd also suggest using a <label> over <span> (as it is a span with some extra properties) (MDN Label)
.cols {float:left;width:25%} //Set columns up, without margin/padding so they align as expected in 4.
.col {margin-left:10%;} // Inner column with margin/padding etc.
<div class='cols'>
<div class='col'>
<input type='radio' name='radio1' /><label for='radio1'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio2' /><label for='radio2'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio3' /><label for='radio3'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio4' /><label for='radio4'></label>
</div>
</div>
If you have the width of your outer container, it would be easier for you to align fixed-sized divs inside it. For example if we have a div with width: 300px;, and we want 3 radio boxes on a row, we specify width: 100px; for them. Add float: left; and it should work out well for you.
Here's a live demo.
If fixed width doesn't suit you, there are many other approaches to do this, I can share if this doesn't work for you.
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms
I just started with Blueprint, so don't bash me :-)
Here's my code, a simple two columns layout:
<body>
<div class="container showgrid">
<div class="span-24 last">
<h1 >Logo Here</h1>
</div>
<div class="span-16">SlideShow</div>
<div class="span-8 last">
<form>
<fieldset >
<label for="email">Email</label>
<input type="text" id="email" name="email" class="title">
</fieldset>
</form>
</div>
</div>
</body>
You can see the result here (on Firefox 3):
http://img600.imageshack.us/i/screenwr.png/
As you can see, the fieldset breaks the grid. If i drop the fieldset, the form gets better, altough it's still one pixel wider. What am I doing wrong?
Thanks for the help.
It's just that the text field is too long. In blueprint, it's set to 300px. Just use CSS to override the text field width and it should be fixed. For example:
.span-8 input.text, .span-8 input.title { width: 275px; }