I've got a checkbox group. Which are centrally aligned with checkboxes on top and text below. Here is what I mean :
So I want to align
So each checkbox + label is wrapped in a div with class choice. All choice divs are part of div with additional-info. choice divs are inline-block elements with fixed width.
How do I align div choice to be in the same height as the first one?
I've tried setting the additional-info position to relative and choice to absolute. But then they overlap each other so that wasn't good.
Also tried setting the choice div display to inline but then the current layout breaks and divs are displayed in the middle in three rows.
Also tried to set additional-info display to table-cell and adding vertical-align top but that didn't work either.
What else can I try? any suggestions is welcome
Update :
Here is my HTML :
<div class="additional-info">
<p class="text required control-label">
Additional info
</p>
<div class="input boolean optional certificate"><input name="user[certificate]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="certificate"><input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label></div>
<div class="input boolean optional no_garden"><input name="user[no_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="no_garden"><input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label></div>
<div class="input boolean optional has_garden"><input name="user[has_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="has_garden"><input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label></div>
</div>
Some css :
.additional-info {
position: relative;
}
.additional-info div {
width: 32.6%;
display: inline-block;
text-align: center;
}
input[type="checkbox"] {
float: none;
display: block;
margin: 0 auto;
}
You can take a look here, I've made it from scratch...
So what I did here is, I've used display: table; for the container element and am using display: table-cell; for the child div and as the child div are now table cells, I used vertical-align: top; so that the elements align to the top in those cells
section {
display: table;
width: 100%;
}
section > div {
vertical-align: top;
display: table-cell;
width: 33%;
text-align: center;
}
<h4>Additional Info</h4>
<section>
<div>
<input type="checkbox" /><br />
<label for="">I've got a valid certificate permits</label>
</div>
<div>
<input type="checkbox" /><br />
<label for="">I've got a valid certificate</label>
</div>
<div>
<input type="checkbox" /><br />
<label for="">I certificate</label>
</div>
</section>
Why not use a simple float to get rid of the remaining 'white space':
.additional-info div {
width: 32.6%;
/*display: inline-block;*/
text-align: center;
float: left;
}
.additional-info {
position: relative;
}
.additional-info div {
width: 32.6%;
/*display: inline-block;*/
text-align: center;
float: left;
}
input[type="checkbox"] {
float: none;
display: block;
margin: 0 auto;
}
<div class="additional-info">
<p class="text required control-label">Additional info</p>
<div class="input boolean optional certificate">
<input name="user[certificate]" type="hidden" value="0">
<label class="boolean optional control-label checkbox" for="certificate">
<input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label>
</div>
<div class="input boolean optional no_garden">
<input name="user[no_garden]" type="hidden" value="0">
<label class="boolean optional control-label checkbox" for="no_garden">
<input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label>
</div>
<div class="input boolean optional has_garden">
<input name="user[has_garden]" type="hidden" value="0">
<label class="boolean optional control-label checkbox" for="has_garden">
<input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label>
</div>
</div>
I have done an inline-block level based on what you said above. Using a set width on the parent div and then child elements forces the items to stack rather than appear in a horizontal list.
<div style="display:inline-block; width:150px;">
<div style="display:inline-block; width:150px;"><input /></div>
<div style="display:inline-block; width:150px;"><input /></div>
<div style="display:inline-block; width:150px;"><input /></div>
<div style="display:inline-block; width:150px;"><input /></div>
</div>
Worth trying to see if it works for your form?
(I know I've done it here as inline-style, but this is just as an example I quickly put together)
Related
I have an example of form draft in Microsoft Word as shown:
and I'm trying to recreate this form as a web page via HTML but I'm having issues with getting the textbox label alignment to be exactly like the one in the draft which is somewhat "right" aligned, followed by the textbox.
When I added the HTML elements it is currently as so:
However I'm trying to achieved the "right" alignment of the labels like the draft above, so I tried using the "text-align: right" function in css but this is what I got instead.
It achieves what I wanted which is for the label to be right aligned but everything got shifted to the right at the end of the div, which means if I were to want the fields to be sort of positioned somewhat left like the draft, does this mean that I would have to move each individual element via the "left" positioning attribute in css? Is there any more efficient way I could use for this?
* {
margin: 0;
padding: 0;
}
.outer_frame {
position: relative;
border: 1px solid black;
}
.inner_frame {
border: 1px solid black;
height: 600px;
width: 700px;
text-align: right;
}
<div class="outer_frame">
<div class="inner_frame">
<div class="entry">
<label id="name">Name</label>
<input type="text" id="name_in" disabled class="field">
</div>
<div class="entry">
<label id="addr">Address</label>
<input type="text" id="addr_in" disabled class="field">
</div>
<div class="entry">
<label id="tel">TelephoneNumber</label>
<input type="text" id="tel_in" disabled class="field">
</div>
<div class="entry">
<label id="iden">Identity Number</label>
<input type="text" id="identity_in" disabled class="field">
</div>
<div class="entry">
<label id="cpny">Company</label>
<input type="text" id="com_in" disabled class="field">
</div>
<div class="entry">
<label id="job">Job Title</label>
<input type="text" id="job_in" disabled class="field">
</div>
</div>
</div>
make your labels inline block, give them a width (as large as the largest text) and then align them right:
label {
display: inline-block;
width: 7.75em;
text-align: right;
margin-right: 2em;
}
<div class="entry">
<label id="name">Name</label>
<input type="text" id="name_in" disabled class="field">
</div>
<div class="entry">
<label id="addr">Address</label>
<input type="text" id="addr_in" disabled class="field">
</div>
<div class="entry">
<label id="tel">TelephoneNumber</label>
<input type="text" id="tel_in" disabled class="field">
</div>
<div class="entry">
<label id="iden">Identity Number</label>
<input type="text" id="identity_in" disabled class="field">
</div>
<div class="entry">
<label id="cpny">Company</label>
<input type="text" id="com_in" disabled class="field">
</div>
<div class="entry">
<label id="job">Job Title</label>
<input type="text" id="job_in" disabled class="field">
</div>
Add margin: auto to .inner_frame if you want it to take the size of the content and add the code below to adjust the lines
.inner_frame{ margin:auto }
.entry{
display:flex
justify-content: space-between;
margin:1em
}
You can fix the width of your labels and then align them to the right:
.entry label {
display: inline-block;
width: 200px;
text-align: right;
margin-right: 10px;
}
Adding the below definition to your inner-frame class will fix the issue
margin:auto; //will center the div
if you need to align it to a different area, use exact values to the margin
margin: 10px 50px 20px 0;
Read more on the topic on the MDN site
I am having a simple registration form, but one of the label fields sticks next to another label field.
Currently it looks like this:
Email should be under the Username, not next to it. Other form elements align nicely, but not these two.
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div>
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div>
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Why don't you just use flex, clean and less code.
.form-wrapper {
width: 400px;
border: 1px solid blue;
}
.username,
.useremail {
display: flex;
margin: 10px;
width: 350px;
justify-content: space-between;
font-weight: bold;
}
<div class="form-wrapper">
<div>
<div class="username">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="useremail">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
If you are going with float you have to know about using clear property for it's next elements. So a best way to handle is, to create a after pseudo-element on the parent and clear:both.
In the below code have added 'field' class for each container and styled it with :after.
.field::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div class="field">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="field">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Labels and input fields are stacked from the left and the right, resp., due to the css float properties. Note that the label/input pairs render on individual lines when removing the css, though without proper vertical alignment.
The CSS display: table property and friends can be employed to rectify this. Basically they cause the renderer to apply table layouting to elements other than tableand descendants.
.d-t {
display: table;
}
.d-tr {
display: table-row;
}
.d-tr > label, .d-tr > input {
display: table-cell;
}
<div class="form-wrapper">
<div class="d-t">
<div class="d-tr">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="d-tr">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Currently I am making a form that has multiple inputs and I am using flex box to make these inputs appear in a column, and text-align center to get the whole form into a centered row. I am attempting to get the text boxes all be in the center of the page and the text move over accordingly.
.mainForm {
text-align: center;
}
.left {
float: left;
}
.inputs {
display: flex;
flex-direction: column;
}
.radio {
display: flex;
justify-content: center;
}
textarea {
overflow-y: scroll;
resize: none;
}
.feedBack {
text-align: center;
}
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
If you want your input/textarea to be absolutely centered, you will have to wrap your text in the <label> element (or any other HTML element, but for usability reason you should always use <label>). That is because we want to position the text independently of the input. An example:
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
When that is done, you can use the following trick:
Set a fixed width for your input elements. Let's say we want them to be 200px wide. Instead of setting this on the input elements themselves, we set it on the containing parent, .formInputs, and then set input elements to take up this full width.
Position the <label> element absolutely within the .formInputs parent. Set it to right: 100% so that it will be offset to the left by the full width of the parent.
Use a right padding so that the right edge of the label text is not directly sticking to the left border of your input
See proof-of-concept below:
textarea {
overflow-y: scroll;
resize: none;
}
.formInputs {
position: relative;
width: 200px;
margin: 0 auto;
}
.formInputs label {
position: absolute;
right: 100%;
padding-right: 10px;
white-space: nowrap;
}
.formInputs input,
.formInputs textarea {
width: 100%;
}
<div class="information">
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
<p class="formInputs">
<label for="membNbr">Control Number:</label>
<input id="membNbr" name="membNbr" type="text" />
</p>
<p class="formInputs">
<label for="lastName">Last Name or Business Name:</label>
<input id="lastName" name="lastName" type="text" />
</p>
<p class="formInputs">
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" />
</p>
<p class="formInputs">
<label for="comment">Comments:</label>
<textarea name="comment" id="comment" cols="30" rows="2"></textarea>
</p>
</div>
Something like this?
.information{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
http://jsfiddle.net/Lcgfqjh9/
You can put the whole thing in a wrapper, apply flex with the below settings to it to center the form, and apply flex and justify-content: space-between to the single lines (i.e. the .formInputs elements) to align the text and input fields at the left and right border:
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.formInputs {
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
</div>
Wrap your form in a div.
Set the div's display to block and text-align to center (this will
center the contained form).
Set the form's display to inline-block (auto-sizes to content), left
and right margins to auto (centers it horizontally), and
text-align to left (or else its children will be center-aligned too).
HTML file
<div class="form">
<form method = "post", action="">
---------
</form>
</div>
in .css
use like this
div.form {
display: inline-block;
text-align: center;
}
Here's an example of the problem I am facing:
https://jsfiddle.net/v10un11s/1/
This is my HTML:
<div>
<div class="component">
<div>
<label for="test1" id="short-label">Short label: </label>
</div>
<div>
<input type="text" id="test1" />
</div>
</div>
<div class="component">
<div>
<label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label: </label>
</div>
<div>
<input type="text" id="test2" />
</div>
</div>
</div>
My css:
.
component > div:first-child {
width: 150px;
text-align: right;
margin-right: 5px;
margin-bottom: 10px;
}
.component > div {
display: inline-block;
}
This results in the input field lining up to the right of the labels. This is what I want, however, it lines at the end of the line of a very long label.
What I really want is that the input field line to the right AND to the relative middle of the label.
So in the JS Fiddle example above, I would want the input field to line up to the right of the third line of the long label.
I've been playing around with margins, paddings, line-height, etc etc, and I've not been able to figure out the correct solution.
Just one line of CSS should do the trick!
.component > div {
display: inline-block;
vertical-align: middle;
}
Just remember, this works both ways - so if your input is taller than your label, the label will center to the input.
You can use Flexbox and set align-items: center on .component
.component {
display: flex;
align-items: center;
}
.component > div:first-child {
width: 150px;
text-align: right;
}
<div>
<div class="component">
<div>
<label for="test1" id="short-label">Short label:</label>
</div>
<div>
<input type="text" id="test1" />
</div>
</div>
<div class="component">
<div>
<label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label:</label>
</div>
<div>
<input type="text" id="test2" />
</div>
</div>
</div>
If I have a form with a label next to an input, in plain HTML, and both are inline (or inline block), then they are aligned by their baseline. But when using bootstrap and putting the input in an input group, it seems they get aligned by their bottom.
I tried to replicate this without bootstrap, but I couldn't, it just works. I created fiddle to show the problem:
http://jsfiddle.net/pupeno/9aJCF/3/
The HTML is:
<p>A case working, with just an input:</p>
<div class="form-group without-input-group">
<label>label</label>
<input type="text" class="form-control" value="value" />
</div>
<hr/>
<p>A case broken with the same HTML structure, but not using bootstrap:</p>
<div class="without-bootstrap">
<label>label</label>
<div class="group">
<input type="text" class="form-control" value="value" />
<span>addon</span>
</div>
</div>
<hr/>
<p>The broken situation, with the input group:</p>
<div class="form-group with-input-group">
<label>label</label>
<div class="input-group">
<input type="text" class="form-control" value="value" />
<span class="input-group-addon">addon</span>
</div>
</div>
and the CSS:
.without-input-group input {
max-width: 250px;
display: inline-block;
}
.without-bootstrap .group {
max-width: 250px;
display: inline-table;
}
.without-bootstrap .group input {
display: table-cell;
}
.without-bootstrap .group span {
display: table-cell;
}
.with-input-group .input-group {
max-width: 250px;
display: inline-table;
}
Because the input group is display: inline-table; and the label is outside the input-group.
If you inspect the input-group-addon element, you see that it is set to display: table-cell; and vertical-align: middle;.
If you move the label inside the input-group and style it same as the input-group-addon it lines up correctly.
<div class="form-group with-input-group">
<div class="input-group">
<label>label</label>
<input type="text" class="form-control" value="value" />
<span class="input-group-addon">addon</span>
</div>
</div>
.
.input-group label {
padding: 4px;
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/N62he/