I am trying to align input boxes in contact form 7 in wordpress. At the moment they are staggered. What can I do align them vertically.
<div style="background-color:green">
<div style="text-align: center;color:white">Heading</div>
<div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Name:</div>
<div style="position:relative; display:inline-block; ">[text* your-name]</div></div>
<div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Surname:</div>
<div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div>
<div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Email:</div>
<div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div>
</div>
You need to give the input fields a parent.
Then once they have a parent you can give the label(text) and input(text field) certain widths to make them occupy 100% or almost 100% of the form's width to make then align elegantly.
Here is the html:
<div style="background-color:green">
<div style="text-align: center;color:white">Heading</div>
<form id="contact">
<label>Name:</label>
<input type="text" />
<label>Surname:</label>
<input type="text" />
<label>Email:</label>
<input type="text" />
</form>
</div>
Here is the css:
#contact {
width: 50%;
}
#contact input, #contact label {
display: inline-block;
}
#contact label {
width: 30%;
}
#contact input {
width: 65%;
}
Finally, a fiddle: Demo
Related
I'm looking to have the right sides of input boxes aligned to the div width - 10px but start strait after each label.
Ideally using just css.
If I needed I guess I could use js / vue to calculate the container width and change the element.style.width of the boxes but I'd rather avoid that.
The style="width: 85%;" is what I'm looking to replace.
<div id="send-to">
To: <input type="text" id="mail-send" style="width: 85%;">
</div>
<div id="host">
STMP Host: <input type="text" id="mail-host" style="width: 85%;">
</div>
<div id="port">
Port: <input type="text" id="mail-port" style="width: 85%;" >
</div>
In the screenshot the widths are hard coded
You can use flex to achieve it, see the example below
.div-wrap{
display: block;
width: 85%;
}
.div-flex{
display: flex;
justify-content: space-between;
white-space: nowrap;
}
input{
width: 100%;
}
<div class="div-wrap">
<div id="send-to" class="div-flex">
To: <input type="text" id="mail-send">
</div>
<div id="host" class="div-flex">
STMP Host: <input type="text" id="mail-host">
</div>
<div id="port" class="div-flex">
Port: <input type="text" id="mail-port" >
</div>
</div>
You can achieve this with using the table-cell layout. See working example below. I added a wrapper class, so it wont destroy the layout of your remaining elements.
.field-wrapper > div > input{
display:table-cell;
width:100%;
}
.field-wrapper > div{
width:100%;
display:table;
}
.field-wrapper > div > p{
display:table-cell;
width:1px;
white-space:nowrap;
}
.field-wrapper{
width:250px;
}
<div class="field-wrapper">
<div id="send-to">
<p>To:</p><input type="text" id="mail-send" style="">
</div>
<div id="host">
<p>STMP-Host:</p><input type="text" id="mail-host" style="">
</div>
<div id="port">
<p>Port:</p><input type="text" id="mail-port" >
</div>
</div>
I hope this is what u r expecting:
.main {
width: 450px;
display: flex;
border: 5px solid black;
flex-direction: column;
}
.main div {
width: inherit;
display: flex;
}
.main div input {
flex: 1;
}
<div class="main">
<div id="send-to">
To: <input type="text" id="mail-send">
</div>
<div id="host">
STMP Host: <input type="text" id="mail-host">
</div>
<div id="port">
Port: <input type="text" id="mail-port">
</div>
</div>
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
The code below is producing the image above within a column:
<div class="aParent">
<div>
<font size="8">Move:</font>
</div>
<div style="float: left;">
<input type="text" id="moveField"/>
</div>
</div>
Here is CSS:
I want it to look like this instead:
How do I align the two horizontally? So that "Move" is on the same line as the text field?
Just put them in the same div
<div class="aParent">
<div style="float: right;">
<font size="8">Move:</font> <input type="text" id="moveField"/>
</div>
</div>
Add this to your .aParent class:
.aParent {
display: flex;
align-items: center;
}
You can change the font size to match the size of the box you want. :)
If you want them to look like your screenshot, make the font sizes match. Also, the font element is deprecated, use CSS to change the font-size instead.
.move, #moveField {
font-size: 3em;
}
<span class="move">Move:</span> <input type="text" id="moveField" value="text" >
You can add some padding for input div.Example:
<div style="display: flex; flex-direction: row;" class="aParent">
<div>
<font size="8">Move:</font>
</div>
<div style="padding-top: 25px;">
<input type="text" id="moveField"/>
</div>
Hope it helps.
Try this css
.aParent {
display: table;
}
.div1{
display: table-cell;
}
.div2 {
display: table-cell;
vertical-align: middle;
}
Add classes to your divs:
<div class="aParent">
<div class="div1">
<font size="8">Move:</font>
</div>
<div class="div2">
<input type="text" id="moveField"/>
</div>
</div>
Just add display property to inline-block and give some height to input for align it to middle of text
`
<div class="aParent">
<div style="display:inline-block">
<font size="8">Move:</font>
</div>
<div style="display: inline-block;">
<input type="text" id="moveField"/>
</div>
</div>
`
HTML
<div class="aParent">
<div>
<font size="6">Move:</font>
<input type="text" id="moveField"/>
</div>
</div>
CSS
#moveField{
width: 3em;
height: 3em;
padding-top: 1em;
border: 4px solid lightskyblue;
}
I simply want to vertically center an input field inside its surrounding DIV, but at the same time all input fields on the page should be horizontally aligned with each other (should have the same left value, if you will).
Here's an example page of the problem:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.inputClass {
position: absolute;
left: 25%;
/* top: 50%; transform: translate(0, -50%); */
/* not working as I need */
vertical-align: middle;
}
<div class="wrapper">
<div>
<div>
Some text
<input type="text" class="inputClass" />
</div>
<div>
Some more text
<input type="text" class="inputClass" />
</div>
</div>
</div>
Desired result (blue rim by Firebug):
You can group inputs+labels in fieldsets and then use the labels for moving the inputs towards the center,
try this:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
fieldset {
border: 0;
/*resets UA*/
}
/*can use label to move inputs right*/
label {
width:40%;
display:inline-block;
padding-right :15px;
text-align:right
}
<div class="wrapper">
<div>
<fieldset>
<label for='one'>Some text</label>
<input id='one' type="text" class="inputClass" />
</fieldset>
<fieldset>
<label for='two'>Some more text</label>
<input id='two' type="text" class="inputClass" />
</fieldset>
</div>
</div>
Put the text in a label (this is good practice anyway) and use inline block to position the elements beside each other. You can then give the label a width as required:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.wrapper label {
display:inline-block;
width:25%;
vertical-align:middle;
}
.wrapper input {
display:inline-block;
vertical-align:middle;
}
<div class="wrapper">
<div>
<div>
<label for="field1">Some text</label>
<input id="field1" type="text" class="inputClass" />
</div>
<div>
<label for="field2">Some more text</label>
<input id="field2" type="text" class="inputClass" />
</div>
</div>
</div>
An excellent way to do this (in my opinion) would be using the table tag in HTML to organise the input fields and the labels. I would then use the "valign" property and set it to "TOP" e.g.
<table>
<tr>
<td valign="TOP">
Some text
</td>
<td valign="TOP">
<input type="text" class="inputClass" />
</td>
</tr>
<tr>
<td valign="TOP">
Some more text
</td>
<td valign="TOP">
<input type="text" class="inputClass" />
</td>
</tr>
</table>
The valign="TOP" assigned to the TD will make it be at the top of the cell in the table. This will ensure that they will be vertically and horizontally aligned with each other.
Another answer without using the table tag:
<style>
li {
width: 120px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
<ul class="list-inline">
<li>Some text</li>
<li>
<input type="text">
</li>
</ul>
<ul class="list-inline">
<li>Some more text</li>
<li>
<input type="text">
</li>
</ul>
</div>
This would be used using BootStrap in order to list it in line.
A possible solution would be to put all the form labels in a div with class "col-left" & the input fields in a div with class "col-right". Both these are vertically middle aligned (vertical-align: middle) & the left column holding the labels have an equal width setting.
Please find below the complete solution:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.col-left, .col-right {
vertical-align: middle;
display:inline-block;
}
.col-left {
width: 20%;
}
<div class="wrapper">
<div>
<div class="col-left">Some text</div>
<div class="col-right">
<input type="text" class="inputClass" />
</div>
</div>
<div>
<div class="col-left">Some more text</div>
<div class="col-right">
<input type="text" class="inputClass" />
</div>
</div>
</div>
I need to make multi-column form layout, where each row can have different count of fields, like this:
First time I used table and td's colspan attribute for creating layout. But I read that laying out using tables is not good idea, so I want to improve my code to use div's.
So can anybody give me good example of how to make layout like above according to best practices? The most problem to me is that width of columns is different.
Thanks.
Don't kill me for not writing 100% valid input fields and not a clear layout with margins etc.
Sample
http://jsfiddle.net/hpmJ7/4/
HTML
<div>
<div class="w50">
<span class="label">Name</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Surname</span>
<input type="text" value="Test" />
</div>
<div class="w100">
<span class="label">Contact</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
<div class="w70">
<span class="label">Phone</span>
<input type="text" value="Test" />
</div>
<div class="w30">
<span class="label">Time</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.label {
width: 60px;
display: inline-block;
}
.w30, .w50, .w70, .w100 {
height: 20px;
float: left;
display: inline-block;
width: 100%;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
.w70{
width: 70%;
}
.w100{
width: 100%;
}
The trick here is to come up with some sort of grid system. In my example, I've put together a 5% based grid system. You can see a basic example of some of your exact pieces in this fiddle.
#container { font-size: 12px; width: 700px; }
.row { float: left; margin: 5px 0; width: 100%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.item { box-sizing: border-box; float: left; }
input, select, option { margin: 0; }
And I've placed the items into rows to provide for a clean, grid-like look.
<div id="container">
<div class="row">
<div class="item w15">/* Entity Name</div>
<div class="item w35">Maricopa County Community College District</div>
<div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
</div>
<div class="row">
<div class="item w15">/* Doctype</div>
<div class="item w10">NLP?</div>
<div class="item w20">Filename/Keywords</div>
<div class="item w20">*Source Frequency</div>
<div class="item w35">
<input type="radio" name="freq" checked="checked" />
<label>Daily</label>
<input type="radio" name="freq" />
<label>Weekly</label>
<input type="radio" name="freq" />
<label>Monthly</label>
</div>
</div>
<div class="row">
<div class="item w15">
<input type="checkbox"/>
<label>Audit</label>
</div>
<div class="item w10">
<input type="checkbox"/>
</div>
<div class="item w20">
<input type="text"/>
</div>
<div class="item w20">*Every</div>
<div class="item w15">
<input type="text" class="w20" value="1"/>
<label>Days</label>
</div>
<div class="item w20">
<select>
<option value="utc-6">UTC -6</option>
</select>
</div>
</div>
</div>
Basically, a specific structure is what you're after, and a grid-like system placed in rows is a great way to do that.
Tables are not that bad.
The reason of why tables are not recomended for layout is that the table is loaded(content of it is shown) only when everything in the table has loaded in the page. But divs show their contents as soon as they are loaded.
Now in you case your form looks fairly complex to me and I think it is not desirable to show partial contents of this form while page is still loading. You definitly want to show all the fields of your form at the same time.
Also, when you want to represent tabular data (which I think applies to your case) then it is recomended to use tables.
So I would suggest(I may be wrong, please somebody correct me if I am) using table for this form of yours.
Also one more benefit that tables provide is you don't have to worry too much about the alignment of your contents.
You can basically create multiple css classes which will depict all those widths you want to depict. It will not be strictly flexible columns, but more like flexible rows, you will have to think in terms of rows instead of columns.
so for each row you would attach specific width classes
<div class="row">
<div class="left width-50"></div>
<div class="right width-50"></div>
</div>
<div class="row">
<div class="left width-70"></div>
<div class="right width-30"></div>
</div>
<div class="row">
<div class="left width-100"></div>
</div>
....
....
Hope it will help.
Check this out:
HTML
<html>
<head>
<link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>
<div id="contactform">
<div id="first">
<div id="name">
<div id="description">Name</div>
<input type="text" name="textName">
</div>
<div id="surname">
<div id="description"> Surname</div>
<input type="text" name="textSurname">
</div>
</div>
<div id="second">
<div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
</div>
<div id="third">
<div id="age">
<div id="description">Age</div>
<input type="text" name="textAge">
</div>
<div id="e-mail">
<div id="description">E-mail</div>
<input type="email" name="textEmail">
</div>
</div>
<div id="fourth">
<div id="phone">
<div id="description">Phone</div>
<input type="text" name="textPhone">
</div>
<div id="time">
<div id="description">Time</div>
<input type="date" name="textTime">
</div>
</div>
</div>
</body>
</html>
CSS
#contactform {width:500px; height:500px;}
#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;}
#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}
#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}
#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}
#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}
Output
HTH.