Two column grid without using row class - html

I am generating HTML pages at run time with the help of freemarker. This poses some limitation on the HTML generation part.
Currently to show input fields in two grid column, I need to define each row and place my fields in it.
Current HTML
<body class="container">
<div class="section-outline">
<div class="row-fluid show-grid">
<div class="span6 form-inline"><label class="pocLabel">First Name:</label><input type="text" required/></div>
<div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text" /></div>
</div>
<div class="row-fluid show-grid">
<div class="span6 form-inline"><label class="pocLabel">Last Name:</label><input type="text" required/></div>
<div class="span6 form-inline"><label class="pocLabel">Social Security Number:</label><input type="text"/></div>
</div>
Can I get same result without putting span6 divs in a row? I want same result with something like:
<div class="span6 form-inline"><label class="pocLabel">First Name:</label><input type="text" required/></div>
<div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text" /></div>
<div class="span6 form-inline"><label class="pocLabel">Last Name:</label><input type="text" required/></div>
<div class="span6 form-inline"><label class="pocLabel">Social Security Number:</label><input type="text"/></div>
Here
.show-grid [class*="span"] {
text-align: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 40px;
line-height: 40px;
margin-top: 10px;
display: inline;
}
label.pocLabel {
width: 200px;
vertical-align: middle;
}
.section-outline {
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

is this what you are looking for : http://jsfiddle.net/wa2YQ/
.span6.form-inline {
display:inline-block;
width:49%;
}
.span6.form-inline label {
width:200px;
display:inline-block;
}
or
http://jsfiddle.net/wa2YQ/1/
.span6.form-inline {
float:left;
width:50%;
}
.span6.form-inline label {
width:200px;
display:inline-block;
}
or else ?

You can use the :nth-child, but this is only supported in recent browsers
.show-grid .span:odd {
/* Your css for left floating */
}
.show-grid .span:even {
/* Your css for right floating */
}
If you need to support older browsers you can change the order of the fields and float them left next to each other.

if you want do do that without placing span6 inside row then you first need to get rid of row-fluid you are using in the main container div. Just use row there and and apply offset to to move the required div to the right.like this pen http://www.codepen.io/anon/pen/wfFnG
First Name:
Middle Initial:
Last Name:
Social Security Number:

Related

Odd / Irregular Float CSS Elements in the Browser

I've got a static site, which is all of a sudden displaying irregular headings. This is a single page with lots of JavaScript including tabular selections at the top of the page. The site worked just fine six months ago. Now I'm seeing unexplained mis-alignment of input elements on a half of the 12 different navigation tabs:
Decorative Ends
Round to Tapered
Bracing
Round to Square
Round to Flat
Airframe Cluster
The headings contained within a form:
<form id="dte_form">
<div class="containerLeft">...</div>
<div class="containerLeft">...</div>
<div class="containerLeft">
<label title="Data can.. [hover info]">Tube O.D. (mm): </label>
<input type="text" id="dteCutTubeOD" value="31.75" size="8">
<br>
<label>Amplitude (mm):</label>
<input type="text" id="dteAmplitude" value="25.4" size="8">
<br>
<label># of Cycles:</label>
<input type="text" id="dteNumOfCycles" value="3" size="8">
<br>
</div>
<div style="clear: both"></div>
<div class="containerLeft">
<input type="button"...>
<input type="button"...>
<input type="button"...>
<input type="button"...>
</div>
</form>
The CSS is nothing fancy:
.containerLeft {
float: left;
margin: 4px 20px;
}
.containerLeft label {
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
.containerLeft input[type=text] {
float: right;
height: 15px;
margin: 4px 5px;
padding-left: 5px;
}
The heading should look like this:
Basically, in a div, I would float the label left, float the input element right, add a <br> and repeat. I can't figure out why occasionally the elements don't line up correctly. I'm sure I'm missing something silly, but I just can't see it. Any ideas what is causing the occasional misalignment?
Click here for website. Note. I'm seeing the same results in both Chrome and Firefox.
This is what happens when you use floats. They overlap following blocks and shrink line boxes.
If you want to prevent an block element from being adjacent to a float, just use clear.
.float {
float: left;
width: 50px;
height: 3em;
border: 1px solid;
background: yellow;
}
.normal, .clear {
height: 2em;
border: 1px solid;
background: pink;
}
.clear {
clear: left;
}
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="normal">Normal</div>
<br /><br />
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="clear">Clear</div>
So apparently the issue is related to element height. Note that the label and input elements have different heights. This was done for appearance. In some combinations and element lengths the float thing gets futzed up.
The corrective action was to modify the CSS style sheet in one place:
.containerLeft label {
clear: both; /* new addition to this element */
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
An alternative would be to use <div style="clear: both"></div> in lieu of the <br> elements (or use the handy CSS library classes offered up by Oriol)

How to style form with line numbers using CSS Grid Layout?

I would like to create a form, which has a line number on each line and several form fields on each line. If the fields don't fit into one line, they should wrap into a new line while the line number stays at the top of the line. Here's an illustration of this form:
(The dark blue lines describe the explicit grid areas, the light blue line implicit grid areas for the different form fields.)
I know CSS Grid Layout is meant to solve use cases like this, though it is not clear to me, how to generate the form mentioned above with it.
What I've tried so far is:
HTML:
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<label for="field1">Field 1 <input id="field1"/></label>
<label for="field2">Field 2 <input id="field2"/></label>
<label for="field3">Field 3 <input id="field3"/></label>
</div>
<div class="row">
<div class="lineNumber">2</div>
<label for="field1">Field 4 <input id="field1"/></label>
</div>
</div>
CSS:
.row {
display: grid;
grid-template-columns: 50px 1fr 1fr;
grid-auto-rows: 30px;
}
.row > * {
padding: 4px;
}
.lineNumber {
grid-row-end: line-number span;
}
What I don't get yet, how can I achieve to let the row number column span over the whole height of the row while the other columns wrap between lines. I assume it must be possible defining the line-number named area using grid-template-rows. Though how?
EDIT:
I'm aware that it may be possible by using display: table-row; / display: table-cell;, though my main point is to achieve this using CSS Grid Layout.
2ND EDIT:
Note that some months after I asked this question here and Grid Layout implementations stabilized showing this feature is not available yet, I requested it at the CSS Working Group. Since then a similar request for spanning explicit and implicit tracks was made.
In my opinion, css counters should meet your question
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
form {
counter-reset: form;
border: 2px solid cyan;
}
fieldset {
position: relative;
display: block;
padding: 1em 1em 1em 3em !important;
border-bottom: 2px solid cyan;
}
fieldset::before {
counter-increment: form;
content: counter(form);
position: absolute;
left: 5px;
top: 5px;
font-weight: bolder;
}
.sp-b { margin-bottom: 1em }
<form>
<fieldset>
<div class="row">
<div class="col-xs-6 sp-b"><input type="text" class="form-control"></div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
</form>
You can use display:table/table-cell to achieve what you want
Snippet
*,
*:before,
*:after {
box-sizing: border-box;
}
.form {
display: table;
table-layout: fixed;
width: 100%;
border: 1px solid #000;
}
.row {
display: table-row
}
.lineNumber,
.fields {
display: table-cell;
vertical-align: top;
padding: 10px 0;
}
.lineNumber {
border: 1px solid #000;
border-width: 0 1px 1px 0;
width: 20px;
text-align: center
}
.fields {
border-bottom: 1px solid #000;
/*fix inline-block gap*/
font-size: 0
}
label {
padding: 0 10px;
/*whatever you want */
font-size: 16px;
}
.row:first-of-type label {
width: 50%;
display: inline-block
}
.row:first-of-type label:not(:last-of-type) {
border-bottom: 1px solid red;
padding-bottom: 10px
}
.row:first-of-type label:last-of-type {
margin-top: 10px
}
.row:last-of-type .lineNumber,
.row:last-of-type .fields {
border-bottom: 0
}
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<div class="fields">
<label for="field1">Field 1
<input id="field1" />
</label>
<label for="field2">Field 2
<input id="field2" />
</label>
<label for="field3">Field 3
<input id="field3" />
</label>
</div>
</div>
<div class="row">
<div class="lineNumber">2</div>
<div class="fields">
<label for="field1">Field 4
<input id="field1" />
</label>
</div>
</div>
</div>

How do I format form elements effectively without using a table?

I have been trying for several hours to format my form neatly without the use of a table.
I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:
Label(Root Diameter) | Input(text) | label(mm)
I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.
Here is my code.
html:
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> Reset
Calculate
Exit
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
css:
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
And here is a fiddle link
You can have "normal" html tags and table-like display using the CSS Table Model
Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/
You can just float your .input class to the left and make it a bit narrower (max-width:70px).
See it here: http://jsbin.com/pepixare/1/edit
I use div's to solve this problem.
my width is in % you can use px if you prefer.
col- represents the width of the div in %.(col-40 == width:40%;)
you can easily implement this with other attributes like inputs,ul,ol,a,img ect.
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.
For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)
And here is a link to an updated fiddle
Hope I was able to help anyone in the same predicament.

How can I layout text and inputs on a form to fit a specific width (justified)?

I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.
This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?
You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 15994654</title>
<style>
#fields {
width: 1000px;
border: 1px solid gray;
}
.justified {
text-align-last: justify;
}
</style>
</head>
<body>
<p id="fields" class="justified">
<label for="input1">label1</label>
<input id="input1" />
<label for="input2">label2</label>
<input id="input2" />
<label for="input3">label3</label>
<input id="input3" />
<label for="input4">label4</label>
<input id="input4" />
<p>
</body>
</html>
This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:
.justified {
text-align: justify;
}
.justified:after {
content: '';
display: inline-block;
width: 100%;
}
Note that the text-align-last: justify becomes redundant this way.
Here's the jsfiddle demo.
Actually, there's a very natural way to do this with pure CSS using text-align: justify;.
You didn't succeed because justification doesn't work for the last line (and when there's only one line, it's considered to be the last). There's a CSS3 property that sets text alignment for the last line: text-align-last. Unfortunately, it is not broadly supported.
The solution is to spawn an extra element that will drop to next line, then the first line will be justified:
<form>
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
form {
width: 800px;
text-align: justify; /* Can we really make this work? Sure! */
}
input {
display: inline-block; /* making elements respect text-align */
}
form:after {
content: ""; /* creating a hidden element that drops to next line */
display: inline-block; /* making it respect text-align and width */
width: 100%; /* forcing it to drop to next line */
}
Demo: http://jsbin.com/ituroj/5/ (click "edit" in top right corner to fiddle with the code).
Result: semantic, no HTML footprint, minimal CSS code, full browser support.
One approach would be:
input[type=text] {
width: 25%;
box-sizing: border-box;
}
Or, if the fields are really inside a <table/> like in this Fiddle, you can set the width of the textboxes to 100%, so the table controls the width:
input[type=text] {
width: 100%;
box-sizing: border-box;
}
You can do it by nesting the input and labels inside of 'columns' that you determine the width of by percentage - this way you can control the width of the form and the inputs will stay justified.
HTML
<form>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4 last">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
</form>
CSS
form{
width:800px;
}
.col4{
width:23.5%;
margin-right:2%;
float:left;
}
.last{
margin:0;
}
.inputWrapper{
width:100%;
}
.textInput{
border:1px solid #ccc;
display:block;
padding:5px;
}
.textInput input{
width:100%;
border:none;
padding:0;
}
You can see a jsFiddle example here http://jsfiddle.net/patricklyver/4mbks/
You can combine float with box-sizing. You will have to float, because forms have different weirdness around them in different browsers. For example in Safari on OS X there is always a hidden 1px padding on the top.
JSfiddle
HTML
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<div class="clear"></div>
</form>
CSS
#myForm {
border: 1px solid blue;
width: 800px;
}
#myForm input[type=text] {
margin: 0px;
display: block;
float: left;
box-sizing: border-box;
width: 25%;
border: 0px;
background-color: orange;
}
#myForm .clear {
clear: both;
}

html not displaying same in IE8

The 'required' text is showing up to the left of the input box. Similar problem in Opera except is displays on the next line (creates a line break). Looks as expected in FF3.1 and chrome. Any suggestions? Eventually I would like to use the display:none attribute on the 'required' span and show this span as necessary with javascript.
<html>
<head>
<title></title>
<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
// float: right;
width: 235px;
text-align: left;
padding-right: 0px;
padding-left: 45px;
}
div.spacer {
clear: both;
}
.container{
width: 425px;
background-color: #ccc;
border: 1px dotted #333;
padding: 5px 5px 5px 5px;
margin: 0px auto;
}
.error{
color: #ff0000;
}
.required{
color: #ff0000;
float: right;
// display:none;
// display:inline;
}
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">
<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>
<div class="container">
<div class="row">
<span class="label">Name:</span>
<span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span>
</div>
<div class="row">
<span class="label">Email:</span>
<span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span>
<span id="email_error" class="required">(required)</span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="formw">
<input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
</div>
<div class="spacer">
</div>
</div>
<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>
</form>
</div>
</body>
</html>
IE really makes me hate web dev sometimes.
You probably should start by adding the proper DocType tag at the top of your file.
EDIT:
After looking at your code, it appears you are not using your floats properly. First off - // does NOT comment out lines in a CSS file. You need to wrap it in /* and */ to comment it out. So your SPAN.formw style is floating to the right, which is before your SPAN.required, which also floats right. Since you're using SPAN tags, you really don't need to float anything here. If you remove all of those it should just fall into place for you.
Which doctype are you using ? A strict one may prevent that kind of problem... Also, I usually start my CSS design with a reset file to get rid of all those kind of annoyances : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Using double slash "//" is not valid CSS commenting. So this float right rule:
div.row span.formw { // float: right;
Is being applied.
Use:
/* comment */
When commenting CSS.
Put a float:left on the formW class
Float all the boxes in the row to the left, instead of mixing floating and inline elements:
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: left;
width: 235px;
padding-left: 45px;
}
.required{
float: left;
color: #ff0000;
// display:none;
}
jriggs, since IE8 is still not completely stable, for some projects you can have IE8 revert to IE7 rendering rules. One of the benefits is that this doesn't give the user the compatibility view button on the right of the location bar.
For more info and specifics see
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx