Show input right after label - html

I need to show (within a div tag) a label and right next to the label an input. I am using bootstrap css and my code is as follows:
<div class="row">
<div class="span3">
<div class="control-group">
<label class="control-label" for="txtInput">Enter Text:</label>
<div class="controls">
<input id="txtId" class="input-medium" name="txtInput" />
</div>
</div>
</div>
</div>
No matter what I do there is a space between the label ("Enter Text:") and the left margin of Input.
How do I change the HTML or CSS to accomplish this? TIA

To adjust the position of only your input field you should be able to just apply the "position" CSS property of that element. Once you set that "position" property as relative you can move the element's position relative to its initial starting location using top,bottom,left, and right.
In the below example I moved your input field 5 pixels to the left of where it normally would be.
<style>
.controls{
position:relative;
left:-5px;
}
</style>

Try removing any whitespace between the elements. For example:
<label class="control-label" for="txtInput">Enter Text:</label><div class="controls"><input id="txtId" class="input-medium" name="txtInput" /></div>
Then, just remove the margin or padding of the div or input, if you want them to be placed right next to each other. The whitespace between them is rendered, so you'll have to remove it. Another approach I've seen is (but never used) is to put an HTML comment between the elements instead, like this:
<label class="control-label" for="txtInput">Enter Text:</label><!--
--><div class="controls"><!--
--><input id="txtId" class="input-medium" name="txtInput" />
</div>
See if either of those help. I recently ran into this problem where I was getting unexpected whitespace between my labels and inputs, and I couldn't remove it without using negative margin, which I didn't like. The solution I found was to remove the whitespace as in the first example. It doesn't look too pretty in the code, but it works.
Good luck!

You could put a negative margin on input-medium to force it to be closer to the label:
div.controls {
display:inline;
}
.input-medium {
margin-left:-4px;
}

Related

Add label on top of two textarea [CSS]

I'm beginner on CSS.
I want to add a label on the top of the two textarea. When I tried Label tag (as shown below) , the second textarea ends up beeing under the first textarea( basically I want them side by side ).
Here is my JSFIDDLE
<label for="Coords">Past Coordinates here: </label>
<textarea id="Coords" cols="35" rows="20"></textarea>
<label for="Time">Time: </label>
<textarea id="Time" cols="25" rows="20"></textarea>
My two textarea are wrapped to put them on the right.
Can anyone help me ?
Thanks!
use this. http://fiddle.jshell.net/sherali/agr3a07m/209/show/
UPDATED:
Tip: remove your cols and rows from textarea. you should define from css(thorugh width, height)
in HTML:
<div class="box">
<label for="Coords">Title of Coords: </label>
<textarea id="Coords"></textarea>
</div>
<div class="box">
<label for="Time">Title of Time: </label>
<textarea id="Time"></textarea>
</div>
in CSS:
textarea#Coords{
width:270px;
height:300px;
}
textarea#Time{
width:215px;
height:300px;
}
label {display:block;}
.box{
display:inline-block;
}
Probably the simplest way is to wrap each label/textarea pair in a div and set display: inline-block; on each div. Though I'd recommend checking out some frameworks with grid systems, like Bootstrap, that abstract and simplify this.

Space appears above form (in Chrome only)

I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}

How align div to a form field?

Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}

extra white space between input elements

i am trying to remove the white space between two imput fields for all my form elements.
i decreased the height but after that the next label goes up
can you tell me how to remove it
http://jsfiddle.net/DA9gK/18/
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Contact Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
I don't think anyone could help You by now. You have big mess here. Update jsfiddle with HTML and CSS windows. Btw - you're writing about padding or margin styles imo in labels. (margin-bottom:0)
I think this should solve your problem, I have answered it there. Thank you. button alignment in form fields
Damn! I apologize for the uncorrect fast answer, ok I have zeroed in on your problem, and the problem lies in the css file that you are importing viz. "http://twitter.github.com/bootstrap/assets/css/bootstrap.css" and your elements are inheriting the style attribute from it, and your white space problem is exactly on 'line no 1945' where its explicitly defined
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 180px;
*margin-left: 0;
so either you have to manually override those or use the good old "!important" attribute.
PS: you have to edit the 'margin-left' attributes value to maybe 160px or something which you are comfortable with.
It's because of the padding and margin on label.control-label. Remove the top padding or bottom margin. (I think removing the margin looks better.)
label.control-label {
margin-bottom: 0;
}

Break line after input without html markup

I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}