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;
}
Related
I am trying to put an image and text side by side, but it is not working. The current look that I get is as shown below in the figure:
The intended layout is :
The code that I am using is as follows:
<div class="form widget widget-large">
<form method="POST">
#csrf
<img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
style="width : 30%; display: inline-block; vertical-align: top;">
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
</form>
</div>
I followed some tutorials that accomplish image and text side by side, but it is still not working.
May anybody knows what is the problem?
Thank you in advance.
The simple answer, following what you already have in the code which is using inline-block on some elements, is to use it also on the divs with the name: elements as a browser will start an element on a newline unless told otherwise.
Here is a snippet:
<div class="form widget widget-large">
<form method="POST">
#csrf
<img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
style="width : 30%; display: inline-block; vertical-align: top;">
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div style="display:inline-block;">
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
</form>
</div>
However, this will not be the end of the formatting you want to do I suspect. Also, you have a label Name as if it's associated with an input element, but there is no input element. Perhaps that is to come.
I strongly recommend that you need to split areas left and right. After that the left column set as display:inline-block; and float:left. This two CSS property will justify the column to the left to put another column to the right.
After creating the left and right columns, you must assign these two variables for the right column because element is a block element and it will cover all row if you don't manipulate it with the display:inline-block;
.left, .right {
display:inline-block;
float:left;
width: 50%;
}
img {
width:100%;
height:auto;
display: inline-block;
vertical-align: top;
}
<div class="form widget widget-large">
<form method="POST">
<div class='left'>
<img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
>
</div>
<div class='right'>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
<div>
<label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
</div>
</div>
</form>
</div>
Another Solution
Grid system has been used widely to do this problem and it is easy to use. For examle Bootstrap has a grid system. You can research and try it only with grid css.
I am trying to center the descriptions and inputs in the middle of the screen. But I don't know how to align the descriptions and inputs both perfectly. Here is my html code and CSS.
<div class="smallrow innerbody">
<div class="col-12">
<h1>Here is the side column</h1>
</div>
<div>
<div class="col-6" style="text-align: right;">
<p>Please input your email address:</p>
<p>Please input your password :</p>
<p>gender :</p>
<p>city :</p>
</div>
<div class="col-6" style="text-align: left;">
<input type="email" name="email"><br>
<input type="password" name="password">
</div>
</div>
</div>
This part is relevent css code
.smallrow{
width: 98%;
margin: 10px;
position: relative;
box-shadow: 10px 10px 5px #888888;
}
col-6 {
width: 50%;
}
My current work look like this
current result
You need to float col-6 to the left. You are also missing . before col-6 in your css.
Here is a fixed version of your code. https://jsfiddle.net/ttmtnq9c/
You can center them using the helper class .text-center and removing the .col class. I also put your text in a label, and wrapped each label in a div so that they're on their own row.
.smallrow {
width: 98%;
margin: 10px;
position: relative;
box-shadow: 10px 10px 5px #888888;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="smallrow innerbody">
<div class="col-12">
<h1>Here is the side column</h1>
</div>
<div class="text-center">
<div>
<label>Please input your email address: <input type="email" name="email"></label>
</div>
<div>
<label>Please input your password : <input type="password" name="password"></label>
</div>
<p>gender :</p>
<p>city :</p>
</div>
</div>
Here is a Demo that you can use...
Don't forget to add bootstrap:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
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>
In my html i have two input tags and i want them on the same line, after i search and try more code.
It doesn't change anything, what wrong is my code?
<div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline">
<input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
You have give some width for input["type="text"] or input["type="image"] like below:
Otherwise you cad custom class in form-control class and replease this class to .form-control
See Bootply link
.form-control {
float: left !important;
width: 90%;
}
.add_field_button {
float: right;
text-align: center;
width: 10%;
}
There is no need for a float:right in your code a form could simple be put
<input type="text">
<input type="text">
and they will show up beside each other also you should always put the type first
simply you can use display:inline-block to container of input tags
<html>
<body><div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline" style="display:inline-block"> //inline-block added here
<input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Please use the below code for the same.
.inline input[type="text"] {
float:left;
margin:10px 10px 0px 0px;
}
<div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline">
<input class="form-control" type="text" name="meaning[]" id="meaning " >
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
You are setting the type of your input field to 'image', which according to this page isn't valid in bootstrap, and in general isn't valid for html. I can only guess what you're trying to do, but from the way things look, you want:
a text input field
a submit button to the right of the text input field
an image instead of the regular submit button appearance
If that is accurate, take a look at the following snippet:
#formElementContainer {
margin-top: 60px; /* this is only important for display within this snippet */
}
#formElementContainer input[type='text'] {
width: calc(100% - 50px);
}
#formElementContainer input[type='submit'] {
background: transparent url('https://www.gravatar.com/avatar/eb603bf5dd01c06880fdb8e4e1d04df3?s=32&d=identicon&r=PG&f=1') center center no-repeat;
border: none;
width: 32px;
height: 32px;
}
<div id="formElementContainer">
<input type="text" />
<input type="submit" value="" />
</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.