When I create the text in the html page , I add a multiple line textbox on right side, and it shows like this.
what I expect is the second picture, what kind of html code/css can achieve it?
.formfield * {
vertical-align: top;
}
<p class="formfield">
<label for="textarea">Label for textarea</label>
<textarea id="textarea" rows="500">Textarea</textarea>
</p>
Related
When I use the following code, text box size is increased to 300px, but when I type the text in it, it aligns at the top left corner. I want text to be aligned vertically in the center left rather than the top left.
<input type="text" style="valign:middle; with:250px;height:300px;">
Where am I going wrong? Is there any other solution for this?
you want this?
<input type="text"
style="text-align:center;valign:middle; width:250px;height:300px;">
otherwise it's unclear for me..
Try adding line-height
<input type="text" style="valign:middle; with:250px;height:300px;line-height:300px;">
After some research found this:
input { line-height: normal; }
I have created a simple text label with a input field and a image behind it:
<p><label for="something" style=" padding: 5px; display:inline-block; width: 440px; border:1px solid white;">Something Since<input type="text" id="datepicker" size="7" readonly></label></p>
With all the other text labels, that havent got the id datepicker (which contains a image and when clicked on the image a daterpicker pop-up) the text is automaticly centered middle in the box. This isnt the case with the image text..
Here a image which makes it a bit clearer:
Anyone a clue how i can fix it so the text and image is centered as well in the inline box?
To center images and text in one line you can apply vertical-align: middle to your image like this:
<p>
<label for="something">Something Since</label>
<input type="text" id="something" />
<img src="" style="vertical-align:middle;" />
</p>
http://jsfiddle.net/2nxsQ/
I want the text that sits next to a one row textarea to be centered vertically with the textarea.
This is the default behavior if I put text next to an input of type="text".
Id like to stick with the single row textarea rather than an input here because this field is there for the user to paste a fair amount of pre formatted data into. The user wont normally care what the data says or need to see it unless the program finds a problem. If a problem is found an error is shown, at which point its helpful if the user can drag out the text area to view the data and research the issue.
My Code:
<tr>
<td class="vert" > New PNR Info
<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
<input type="text" size="4" id="fee"name="fee"></td>
</tr>
Ive Tried:
css like this:
.vert {
vertical-align: middle;
}
and this vertical-align: top;
and wraping the two in a p tag like this
<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>
to no avail.
If my question is not clear maybe a screenshot will help. I want the offending text by the red arrow to be cetered like the text by the green arrow.
Apply the vertical alignment to all elements like this
Demo
<p class="whatever">
<label for="alignme">Label Text</label>
<textarea id="alignme"></textarea>
</p>
.whatever * {
vertical-align: middle;
}
.whatever * is equivalent to
.whatever label, .whatever textarea {
vertical-align: middle;
}
It doesn't seem logical at first, but the vertical-align property needs to go on the taller element:
http://jsfiddle.net/N5NuA/
textarea {
vertical-align: middle;
}
I believe the problem is you are setting the parent (td or p) to align to the top and since your textarea is inside that element it aligns according to parent, not the text.
What I think will work is setting the textarea vertical alignment.
<textarea style="vertical-alignment:middle">
If that does not work, also change the parent element to middle. Also try text-top or text-bottom for the text-area if those changes do not work also.
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;}
I'm sure there are a lot of people with this problem, but I can't find a proper solution. That is basically is the problem. I've got a form with two pairs of label and field.
HTML:
<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />
CSS:
label {
width: 150px;
float: left;
text-align: left;
}
So the problem is: when I don't use the 'float:left;' the input field will be not nice structured. BUT the label is going top-aligned. How can this be fixed?
An example is visible here: http://jsfiddle.net/ptKEh/9/ (comment float:left; to see what I mean)
EDIT::
Another thing... The input fields are in Chrome correct but in IE9 (9.0.8) the second field is a little shorter.
instead of floating the labels just use display: inline-block;
it will preserve the vertical alignment and it works even on IE6 and 7
I would recommend using padding to move the text down to be inline. This will only work with 1 line of text for the label and is cross browser capable.
I have put together an example jsfiddle http://jsfiddle.net/ptKEh/11/