3 column form with 3rd column spanning vertically - html

I'm trying to find a way to have a form that displays the fields horizontally rather than vertically....with the exception of the last column. I'd like that to span vertically. Here's the code I have for getting the 2 columns the way I'd like them:
<html>
<head>
<style type="text/css">
.display-label, .editor-label
{
margin: 1em 0 0 0;
display: block;
width: 300px;
}
.display-field, .editor-field
{
margin: 0.5em 0 0 0;
display: block;
width: 300px;
}
.sameline-wrapper
{
float: left;
display: inline;
}
.newline
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="test.html" method="post">
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a field:
</div>
<div class="display-field">
<input type="text" id="t1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a second field:
</div>
<div class="display-field">
<input type="text" id="t2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a third field:
</div>
<div class="display-field">
<input type="text" id="t3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a fourth field:
</div>
<div class="display-field">
<input type="text" id="t4" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a fifth field:
</div>
<div class="display-field">
<input type="text" id="Text1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a sixth field:
</div>
<div class="display-field">
<input type="text" id="Text2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a seventh field:
</div>
<div class="display-field">
<input type="text" id="Text3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a eigth field:
</div>
<div class="display-field">
<input type="text" id="Text4" style="width: 100px;" />
</div>
</div>
</div>
</form>
</body>
</html>
What I'm trying to accomplish now is to have a 3rd column to the left that spans the entire height of the other rows. The idea is to have a textarea control in there and it all look uniform. I've added this image to help see what I'm trying to do:
and here's a fiddle:
3 Column Form
I just don't know how to get that 3rd column to line up to the left of the others and to be the same height (vertically) as the other rows. Any help is greatly appreicated!


Rearrange your html to specify one div for each column like this:
<html>
<head>
<style type="text/css">
.newspaperCol
{
float: left;
width: 33%;
}
.display-label
{
margin: 1em 0 0 0;
display: block;
}
.display-field
{
margin: 0.5em 0 0 0;
display: block;
}
</style>
</head>
<body>
<div class="newspaperCol">
<label class="display-label">Field 1:</label>
<input class="display-field" type="text" id="text1">
<br />
<label class="display-label">Field 3:</label>
<input class="display-field" type="text" id="text3">
<br />
<label class="display-label">Field 5:</label>
<input class="display-field" type="text" id="text5">
<br />
<label class="display-label">Field 7:</label>
<input class="display-field" type="text" id="text7">
</div>
<div class="newspaperCol">
<label class="display-label">Field 2:</label>
<input class="display-field" type="text" id="text2">
<br />
<label class="display-label">Field 4:</label>
<input class="display-field" type="text" id="text4">
<br />
<label class="display-label">Field 6:</label>
<input class="display-field" type="text" id="text6">
<br />
<label class="display-label">Field 8:</label>
<input class="display-field" type="text" id="text8">
</div>
<div class="newspaperCol">
<label class="display-label">Notes:</label>
<textarea rows="17" cols="30" id="notestext"></textarea>
</div>
</body>
</html>
EDIT:
I re-read your question and updated my answer using more of your original code. I think you're missing some HTML for the notes elements. Try adding the colLeft and colRight css classes and the associated "div" elements shown below.
<html>
<head>
<style type="text/css">
.colLeft
{
float: left;
width: 66%;
}
.colRight
{
float: left;
width: 33%;
}
.display-label, .editor-label
{
margin: 1em 0 0 0;
display: block;
width: 300px;
}
.display-field, .editor-field
{
margin: 0.5em 0 0 0;
display: block;
width: 300px;
}
.sameline-wrapper
{
float: left;
display: inline;
}
.newline
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="test.html" method="post">
<div class="colLeft">
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a field:
</div>
<div class="display-field">
<input type="text" id="t1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a second field:
</div>
<div class="display-field">
<input type="text" id="t2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a third field:
</div>
<div class="display-field">
<input type="text" id="t3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a fourth field:
</div>
<div class="display-field">
<input type="text" id="t4" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a fifth field:
</div>
<div class="display-field">
<input type="text" id="Text1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a sixth field:
</div>
<div class="display-field">
<input type="text" id="Text2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a seventh field:
</div>
<div class="display-field">
<input type="text" id="Text3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a eigth field:
</div>
<div class="display-field">
<input type="text" id="Text4" style="width: 100px;" />
</div>
</div>
</div>
</div>
<div class="colRight">
<label>Notes:</label>
<textarea rows="15" cols="30" id="notestext"></textarea>
</div>
</form>
</body>
</html>

Related

css display table-cell horizontal alignment

Below here is the code that I wrote. I wanted a page with 3 table cells, where left one will be one table cell with 50% width of the page, and the right cell will be divided into 2 cells each with 50% height. The code below works partially fine.
The issue is the right 2 cells width gets reduced(screenshot attached). Can't figure out how to get the width to work :")
<div style="display: table; width: 100%; height:100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; border-style: ridge; height: 713px">
<?php
foreach($doctors as $entry)
{
echo '<div style="display: table-row; width=100%;">
<div style="display:table-cell; width:25%;">
<p style="margin-left:10px;">'.$entry["name"].'</p>
</div><div style="display:table-cell; width:20%;">
<p>'.$entry["id"].'</p>
</div><div style="display:table-cell; width:20%;">
<p>'.$entry["designation"].'</p>
</div><div style="display:table-cell;">
<p>'.$entry["salary"].'<button class="btn" name='.$entry["id"].' style="margin-left:100px; width;">Edit salary</button></p>
</div>
</div>';
}
?>
</div>
<div style="display: table-cell; width: 100%;">
<div style="display: table-row;">
<div style="display: table-cell;">
<center>
<form style="border-style: ridge; height: 350px; padding-top: 17px;">
<label class="text" for="id">Enter ID: </label>
<input id="text-box" class="text" type="text" name="id" placeholder="Enter id"><br>
<button id="btn" class="text">Search</button>
</form>
</center>
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">
<center>
<form style="border-style: ridge; height: 350px; padding-top: 17px;">
<label class="text" for="id">Enter ID: </label>
<input id="text-box" class="text" type="text" name="id" placeholder="Enter id"><br>
<button id="btn" class="text">Search</button>
</form>
</center>
</div>
</div>
</div>
</div>
</div>

How to divide html page

I want to make a html page with three sections and inside each section divide it to left and right. In each section I have three boxes and I want to put two boxes on the left and one box on the right following is the css and html code:
.leftbox {
width: 50%;
padding: 5px;
float: left;
}
.rightbox {
width: 50%;
padding: 5px;
float: right;
}
<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">
<h2 class="popup-header">Rotation Forms</h2>
<div class="newRotation-sections">
<h3>Details</h3>
<div class="newRotation-section-1" style="margin-top: 10px;">
<div class="leftbox">
<span>Mob</span> <br />
<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />
<span>Paddock</span> <br />
<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Date</span> <br />
<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />
</div>
</div>
<h3>Fencing options</h3>
<div class="newRotation-section-2" style="margin-top: 10px;">
<div class="leftbox">
<span>Available Today</span> <br />
<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />
<span>Paddock Allocation %</span> <br />
<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Required Result</span> <br />
<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />
</div>
</div>
<h3>Assign As Task</h3>
</div>
</div>
</div>
I receive the below result, I don't know why the fencing options jump to the right side.
Here is the image of my work:

I wrote up this using the Bootstrap Framework. It matches your image exactly.
There's a Codepen if you want to fork and play around with it. It's responsive, too.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>
<h4 class="mb-3 mt-3">Details</h4>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="mob">Mob</label>
<input type="text" class="form-control" id="mob" placeholder="Enter Mob">
</div>
<div class="form-group">
<label for="paddock">Paddock</label>
<input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Enter Date">
</div>
<h4 class="mb-3 mt-3">Fencing Options</h4>
<div class="form-group">
<label for="avail">Available Today</label>
<input type="text" class="form-control" id="avail" placeholder="NaN">
</div>
<div class="form-group">
<label for="allocation">Paddock Allocation %</label>
<input type="number" class="form-control" id="allocation" placeholder="100">
</div>
<div class="form-group">
<label for="result">Required Result</label>
<input type="text" class="form-control" id="result" placeholder="NaN">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h4 class="mb-3 mt-3">Assign As Task</h4>
<div class="form-group">
<label for="assign">Assign to</label><br>
<button type="submit" class="btn btn-success btn-md" id="assign">Add</button>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checked">
<label class="form-check-label" for="checked">I want to see this too.</label>
</div>
<button type="button" class="btn btn-success btn-md">Save</button>
<button type="button" class="btn btn-success btn-md">Cancel</button>
</div>
</div>
</div>

outputLabel above inputText with primefaces

I am developing a JSF web project with primefaces 6.2.
I would produce a form having outputlabel above inputText.
Following a sample code using div.
How can I produce it using panel, panelGrid, row, column, outputLabel and inputText of primefaces? there have not been successful... Thanks!!
<div class="rows">
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;**strong text**loat:left">
<div>Name:</div>
<div>
<input id="name" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;float:left">
<div>Surname:</div>
<div>
<input id="surname" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
</div>
<div class="rows">
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;float:left">
<div>Address:</div>
<div>
<input id="address" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;float:left">
<div>Email:</div>
<div>
<input id="email" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
</div>

improve input form with horizontal labels and vertical labels

could you have a look at the HTML/CSS-code and result behind this link?
the CSS part:
div2 {display: table-cell; vertical-align: middle; border: 0px solid red; }
input {margin: 5px; }
label1 {margin-left: 140px; }
label2 {margin-left: 100px; }
label3 {margin-left: 90px; }
label {margin-left: 10px; margin-right: 20px; }
the HTML part:
<div1>
<label1>First name</label1>
<label2>Last name</label2>
<label3>Date of birth</label3>
</div1>
<div2>
<label for='name'>Person 1:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 2:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 3:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 4:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 5:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
</div2>
Is there a way to automatically align the labels on top so they exactly match with the colomns below? Looking forward to your suggestions. Regards, Piotr

use display: table or table
* {
padding;
0;
margin: 0;
}
.wrapper {
display: table;
table-layout: fixed;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
border: 0px solid red;
padding: 5px 10px;
vertical-align: middle;
}
.row:nth-child(1) {
text-align: center;
}
.row:nth-child(1) .cell {
padding-bottom: 0;
}
.row:nth-child(1) .cell label {
margin-bottom: 0;
}
input, label {
display: block;
width:100%;
margin: 5px 0;
}
label {
margin-left: 5px;
margin-right: 15px;
}
<div class="wrapper">
<div class="row">
<div class="cell"></div>
<div class="cell">
<label>First name</label>
</div>
<div class="cell">
<label>Last name</label>
</div>
<div class="cell">
<label>Date of birth</label>
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 1:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 2:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 3:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 4:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 5:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
</div>

Left and right alignment inside div

I am trying to design the layout in the below screenshot
I tried to implement the same in fiddle
http://jsfiddle.net/NNLct/1/
<div id="CorpDealerSearch" >
<div class="left"> DealerName </div>
<div class="left"> Region </div>
<div class="left"> DealerCode </div>
<div class="left"> Area </div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
</div>
Please help in suggesting proper css to get the design

Have a look at this FIDDLE
HTML
<div class='table'>
<div class='row'>
<div class='cell'>DealerName
<input type='text' />DealerCode
<input type='text' />
</div>
<div class='cell'>Region
<input type='text' />Area
<input type='text' />
</div>
</div>
</div>
CSS
body{
width:100%;
padding:0;
margin:0;
box-sizing:border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding-right:20px;
}
input {
display:block;
width:100%;
}

Try something else:
http://jsfiddle.net/Ta6Qk/
HTML
<div class="main">
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
</div>
and CSS
.main {
width: 400px;
position: relative;
}
.main div {
border: none;
display: inline-block;
width: 44%;
margin-right: 3%;
}
input {
width: 100%;
}
label {
display:block
}

You have to include label and input in the same div:
http://jsfiddle.net/NNLct/5/
Don't forget you can also use label tags to associate the text to the related input.
<div id="CorpDealerSearch" >
<div class="left">
DealerName <input type="text"/>
</div>
<div class="left">
Region <input type="text"/>
</div>
<div class="left">
DealerCode <input type="text"/>
</div>
<div class="left">
Area <input type="text"/>
</div>
</div>
CSS:
.left
{
float:left;
}

Going by your existing markup, here is a : DEMO
Float the elements and after every 2 element, clear the floats, as simple as that!! :)
CSS
.left {
float:left
}
.clr{clear:both}
HTML
<div id="CorpDealerSearch">
<div class="left">DealerName
<br />
<input type="text" />
</div>
<div class="left">Region
<br />
<input type="text" />
</div>
<div class="clr"></div>
<div class="left">DealerCode
<br />
<input type="text" />
</div>
<div class="left">DealerCode
<br />
<input type="text" />
</div>
</div>

See this fiddle:
http://jsfiddle.net/NNLct/16/
Using display:table; display:table-row; display:cell;

Here's the fiddle:Check this
Here's the HTML Code:
<div id="container">
<div id="left" class="left">
<div id="top-left" class="innerdiv">
<div id="lbl-tl">
Dealer Name:
</div>
<div id="txt-tl">
<input type="text" style="width: 90%;" />
</div>
</div>
<div id="bottom-left" class="innerdiv">
<div id="lbl-bl">
Dealer Code:
</div>
<div id="txt-bl">
<input type="text" style="width: 90%;" />
</div>
</div>
</div>
<div id="right" class="right" >
<div id="top-right" class="innerdiv">
<div id="lbl-tr">
Region:
</div>
<div id="txt-tr">
<input type="text" style="width: 90%;" />
</div>
</div>
<div id="bottom-right" class="innerdiv">
<div id="lbl-br">
Area:
</div>
<div id="txt-br">
<input type="text" style="width: 90%;" />
</div>
</div>
</div>
</div>
And here's the CSS:
*
{
margin: 0px;
padding: 0px;
}
#container
{
width: 700px;
min-height: 150px;
}
.left
{
width: 49%;
min-height: 150px;
float: left;
}
.right
{
min-height: 150px;
width: 49%;
float: right;
}
.innerdiv
{
height: 75px;
}

First I would change the html to:
HTML
<div id="CorpDealerSearch" >
<div>
<label for="dealerName">DealerName</label>
<input type="text" id="dealerName" name="dealerName">
<label for="Region">Region</label>
<input type="text" id="Region" name="Region">
</div>
<div>
<label for="DealerCode">DealerCode</label>
<input type="text" id="DealerCode" name="DealerCode">
<label for="Area">Area</label>
<input type="text" id="Area" name="Area">
</div>
</div>
And the css would be:
CSS
#CorpDealerSearch label, input{
float:left;
clear:both;
}
#CorpDealerSearch div{
display:block;
float:left;
width:200px;
}
hope this will help.