Center text vertically next to a one row textarea? - html

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.

Related

How to move the text in the html align to top?

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>

How can I make cursor vertical alignment to middle if the input text tag height is more than the text height?

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; }

How to set all buttons in a controlgroup to the same height when some have two-row labels?

I want to create a row of multiple buttons to form a coherent block in jQuery Mobile. For this, I placed them in a horizontal controlgroup. This approach works well for simple labels, but now I want to have one or more buttons with two rows of text on them. For example:
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
Left
Middle item<br/><sub>Second row</sub>
</fieldset>
</form>
Example on jsfiddle.
My problem is that the multi-row labels appear fine, but the other buttons on the row still have a width appropriate for a single-row label (or no label). The result looks like this:
How can I ...
make all the buttons have the same height?
center the one-row button labels vertically to the new height?
center the icons vertically?
You can Try this:
First Step : assign an id for your <fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" id="t">
Second Step : changes in your css for the a tag
#t a {
float:none;
display:table-cell;
vertical-align:middle;
}
View the Demo http://jsfiddle.net/4qKkf/12/
This can be done using the display: table-cell; trick which allows you to give the links a uniform height and allows vertical centering by use of vertical-align
CSS:
a[data-role] {
display: table-cell;
float: none;
vertical-align: middle;
}
Example: http://jsfiddle.net/4qKkf/14/

Float left causes my input label to be on top instead v-align middle

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/

Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?

I want to put a margin-left on only the text that is wrapped, i.e. text after the first line:
This is text with no margin left
this text has margin left
Example
click to see
The input and the label are in 1 div and text is wrapped on the second line, which is what I want
but is it possible to have like a margin left on only the text that is wrapped on the second line
jsfiddle example of my problem
Yeah, sort of — I’d suggest combining padding-left and text-indent:
HTML
<div class="test">
<label for="2question1">
<input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
</label><br>
<label for="2question2">
<input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
</label><br>
<label for="2question3">
<input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
</label><br>
<label for="2question4">
<input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
</label><br>
</div>
 CSS
.test {
width:200px;
}
.test label {
display: block;
padding-left: 1em;
text-indent: -1em;
}
text-indent applies only to the first line of text in a block-level element, so it should achieve what you want.
See http://jsfiddle.net/pauldwaite/qUvvv/
No, but you can apply CSS to the first line, so you could reverse your thinking to achieve the same effect.
Something like this:
.mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}
Here's a JSFiddle example of it working: http://jsfiddle.net/4ckxJ/3/
See http://www.quirksmode.org/css/firstline.html for more info on the :first-line pseudo-class.
You could wrap the line you want to wrap in a span and apply:
display: block;
margin-left: 12px;
Giving it display: block will make it wrap to a new line and the margin pushes it off to the right.
as per your updated example, here's a fork JSFiddle
float the input and then make the label display block so it floats right in beside it - spacing created with padding and margin, overflow:hidden makes the text "not wrap" - then you also might want to remove the br's from your HTML