Within a form I have an text input and a <a> representing a button to add one more input element.
<div class="col-4">
<input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
<img src="../img/add-icon.png"/>
</div>
Currently each element has its own line, but they should be together in one line:
How can I achieve this?
Bootstrap classes are used.
Please try using d-flex instead of col-4
As in: <div class="d-flex">
Another approach would be using row and column of bootstrap, as in
<div class="row">
<div class="col">
Input here..
</div>
<div class="col">
Button here..
</div>
</div>
refs: Bootstrap Grid, Bootstrap flexbox,
Bootstrap Forms
add following code in css:
.col-4{
display:flex;
align-items:center;
justify-content:space-between;
width:300px;
height:auto;
border:1px solid #000;
border-radius:5px;
}
.col-4 input{
width:250px;
height:100%;
font-size:1rem;
border:none;
padding:1rem 0.4rem;
outline:none;
}
.col-4 a{
height:fit-content;
}
.col-4 a img{
width:40px;
height:40px
}
<div class="col-4">
<input class="form-control" type="text" placeholder="Menge" name="txt_menge[]" value="3">
<img src="../img/add-icon.png"/>
</div>
Related
Sorry for my poor English.
I have a span (like $) and an input, when user inputs something, the span and input should always stay centered horizontally.
I want it looks like the row 1 in the code below. But in fact I can just code it like row 2.
I want a solution, it will be better to be without js.
I've read about this article(HTML text input field with currency symbol) but it doesn't solve my problem for it doesn't center anything.
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<span style="font-size:24px;">$</span>
<input class="this-should-be-input the-input" value="12345"/>
</div>
You could just put the $ in the value, and it will move with the value.
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<input class="this-should-be-input the-input" value="$12345"/>
</div>
But if you wanted it there permanently you wouldn't be able to center your input field without javascript
Your code is center aligning both the $ sign and the text input. The problem is that you have not specified any width for the input field. You can fix this by specifying the width to the input field.
Hope it helps!
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
width:24%;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<span style="font-size:24px;">$</span>
<input class="this-should-be-input the-input" value="12345"/>
</div>
I'm was just passing my time by working on random code of HTML and CSS where I have a div which has class .box and has an Image, Text and a Form in it with input boxes.
I found that when I provide text-align: center; to my parent, all elements comes in the center.
I can't understand what's happening here and why Image and Input boxes react text on text-align: center;
here is the codepen link to my code http://codepen.io/rhulkashyap/pen/MKvzzZ
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/> <br />
<input type="text" placeholder="Password"/> <br />
<input type="submit" value="Login"/>
</form>
</div>
From the CSS specification:
This property describes how inline-level content of a block container is aligned. https://www.w3.org/TR/CSS2/text.html#alignment-prop
All inline and inline-block elements (input, img) are affected of text-align!
You can avoid this by using display:block; for the inner elements (like form, h1, div).
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
input {
display:block;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/>
<input type="text" placeholder="Password"/>
<input type="submit" value="Login"/>
</form>
</div>
A Test Case
div {
border:1px dashed #000;
text-align:center;
width:500px;
}
.block {
display:block;
}
.inline {
display:inline;
}
<div>
<input type="text" value="standard: inline-block">
<input type="text" class="block" value="with display:block">
<input type="text" class="inline" value="with display:inline">
</div>
When you pass text-align: center, it means that the data inside particular div will be placed center according to a rule. Data can be anything, it can be image, text or input box. Your elements are coming in center because all the inline elements are effected by "text-align: center". Please have a look on the following url https://www.w3.org/Style/Examples/007/center.en.html
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>
<p>This is a paragraph. This text has no alignment specified.</p>
</body>
</html>
I'm trying to put 2 divs beneath each other like this:
div 1
div 2
This is how far i've gotten in the HTML-file:
<div width="100%" z-index:"1">
<div id="username-full">
<div id="username-form">
<input type="text" name="username" id="username-input" placeholder="Username" />
</div>
<div id="username-text">
<p>Username:</p>
</div>
</div>
</div>
<div width="100%" z-index:"1">
<div id="passwd-full">
<div id="passwd-form">
<input type="text" name="passwd" id="passwd-input" placeholder="passwd" />
</div>
<div id="passwd-text">
<p>Password:</p>
</div>
</div>
</div>
And this is my CSS-file:
#username-full{
text-align:right;
float:right;
clear:right;
}
#username-text{
float:right;
margin-right:5px;
}
#username-form{
float:right;
margin-top:13px;
}
#passwd-full{
text-align:right;
float:right;
}
#passwd-text{
float:right;
margin-right:5px;
}
#passwd-form{
float:right;
margin-top:13px;
}
Fiddle
As you see, i've tried using the z-index, i've tried to give the 2 divs a width of 100% and i tried using float. Also, I've tried using positioning, but that also didn't work. I'm out of guesses :(.
Greetings,
Luuk
Based on your code, try adding this line:
#passwd-full{
clear: both;
}
I'm guessing, but have a look at this:
#passwd-full {
...
clear: right;
}
Demo
If you want two divs 100% with each and one above the other, you should try:
<div id="One">My first content</div>
<div id="Two">My second content</div>
#One, #Two {width: 100%; clear: both;}
I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don't know how to do it.
My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.
I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/
Snippet:
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>
WARNING: OUTDATED ANSWER
Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.
One possible solution:
Give the labels display: inline-block;
Give them a fixed width
Align text to the right
That is:
label {
display: inline-block;
width: 140px;
text-align: right;
}
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>
JSFiddle
While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layout allows us to structure a more elegant solution.
The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.
[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]
/* CSS */
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
div.settings label { text-align:right; }
div.settings label:after { content: ":"; }
<!-- HTML -->
<div class="settings">
<label>Label #1</label>
<input type="text" />
<label>Long Label #2</label>
<span>Display content</span>
<label>Label #3</label>
<input type="text" />
</div>
Answered a question such as this before, you can take a look at the results here:
Creating form to have fields and text next to each other - what is the semantic way to do it?
So to apply the same rules to your fiddle you can use display:inline-block to display your label and input groups side by side, like so:
CSS
input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
margin-left:20px
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 140px;
}
updated fiddle
I use something similar to this:
<div class="form-element">
<label for="foo">Long Label</label>
<input type="text" name="foo" id="foo" />
</div>
Style:
.form-element label {
display: inline-block;
width: 150px;
}
I know this is an old thread but an easier solution would be to embed an input within the label like so:
<label>Label one: <input id="input1" type="text"></label>
You can also try using flex-box
<head><style>
body {
color:white;
font-family:arial;
font-size:1.2em;
}
form {
margin:0 auto;
padding:20px;
background:#444;
}
.input-group {
margin-top:10px;
width:60%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
label, input {
flex-basis:100px;
}
</style></head>
<body>
<form>
<div class="wrapper">
<div class="input-group">
<label for="user_name">name:</label>
<input type="text" id="user_name">
</div>
<div class="input-group">
<label for="user_pass">Password:</label>
<input type="password" id="user_pass">
</div>
</div>
</form>
</body>
</html>
You can do something like this:
HTML:
<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>
CSS:
.div{
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.input{
width: 50%;
}
Hope this helps ! :)
Here is generic labels width for all form labels. Nothing fix width.
call setLabelWidth calculator with all the labels.
This function will load all labels on UI and find out maximum label width.
Apply return value of below function to all the labels.
this.setLabelWidth = function (labels) {
var d = labels.join('<br>'),
dummyelm = jQuery("#lblWidthCalcHolder"),
width;
dummyelm.empty().html(d);
width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
width = width > 0 ? width + 5: width;
//this.resetLabels(); //to reset labels.
var element = angular.element("#lblWidthCalcHolder")[0];
element.style.visibility = "hidden";
//Removing all the lables from the element as width is calculated and the element is hidden
element.innerHTML = "";
return {
width: width,
validWidth: width !== 0
};
};
All,
I have the following code:
http://jsfiddle.net/k2AMG/7/
I am trying to avoid fixed widths in the CSS and align the divs in this fashion, but am not able to do so:
Your name Textbox
Please check the name
Work email Textbox
Email should have a valid format
Job title Textbox
Job title should have only alphabets
Any help is appreciated. Thanks
Try it like this:
http://jsfiddle.net/andresilich/k2AMG/11/
::Edit:: fixed demo
::Edit 2:: added CSS and HTML to post for future reference
CSS
.data_item{
margin-bottom: 20px;
display: block;
}
label
{
width: 100px;
display:inline-block;
}
.left {
display:inline-block;
margin-right:5px;
}
.right {
display:inline-block;
vertical-align:top;
}
.right span span {
display:list-item;
list-style-type:none;
}
Clarification: created two classes to separate the two sides, .left and .right, and added a style to the span of the .instructions div to display as a list-item (so they can displace like a regular html list would, why? Because it is a clean, responsive drop that displaces naturally without the need to add margin or padding that might displace with any other element around and thus less maintenance.).
HTML
<div class="data_item">
<div class="left">
<label> Your name </label>
</div>
<div class="right">
<span>
<input type="text" />
<span class="instructions">Please check the name</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Work email </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Email should have a valid format</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Job title </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Job title should have only alphabets</span>
</span>
</div>
</div>
Try this: http://jsfiddle.net/k2AMG/9/