vertically align fontawesome icon to the middle of a textarea - css

Question

I am using skeleton css framework, I want to vertically align my fontawesome icon to the right of a textarea, but it seems the common "vertical-align:middle; display: table-cell;" doesn't work. I also want when the textarea resizes, the icon still aligns in the middle, without hard code a height inside the style, is it possible?
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
}
</style>
<div class="row">
<div class="six columns">
<label for="inputA">labelA</label>
<textarea class="u-full-width" id="inputA" type="text"></textarea>
</div>
<div class="one colum">
<span class="icon"> <i class="fa fa-check-circle"></i> </span>
</div>
</div>

Answer 1

You may need to fake it, due to the way skeleton styles its columns.
As such, you can use absolute positioning to offset the icon as necessary:
.six.columns {
position: relative; /* <-- ensure the icon positions relative to the parent column */
}
#inputA {
margin-bottom: 0; /* <-- remove the textarea margin, making the icon look like its not centered */
}
.icon {
position: absolute; /* <-- position the icon */
/* transform:translateY(-50%); OPTIONAL, use for true vertical alignment */
top: 50%;
right: -20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
<div class="six columns">
<label for="inputA">labelA</label>
<textarea class="u-full-width" id="inputA" type="text"></textarea>
<span class="icon"> <i class="fa fa-check-circle"></i> </span>
</div>
<div class="one column">
</div>
</div>

Answer 2

You can try creating a javascript function wich reubicates the icon. Anyways, it could be a little bit of trouble if you're handling with many dinamic icons/textareas.
css:
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
position:absolute; <--- additions
padding-top:52px; <--- additions
padding-left:269px; <--- additions
}
HTML (Notice the onClick="resiz()" instruction)
<textarea onClick="resiz()" class="u-full-width" id="inputA" type="text"></textarea>
<span id="ico" class="icon"> <i class="fa fa-check-circle"></i> </span>
JavaScript
document.resiz=function(){
var he = document.getElementById("inputA").offsetHeight;
var wi = document.getElementById("inputA").offsetWidth;
document.getElementById("ico").style.paddingTop=(he/2+20)+'px';
document.getElementById("ico").style.paddingLeft=wi+'px';
}
Here's the code: https://jsfiddle.net/ko2dzcfc/
You can also make the resiz() instruction to execute when the page loads, so it will automatically place the icon correctly at start, and avoid editing the css.
Update: I tested it in Firefox, and it worked well. In chromium it does not work so well. Maybe you'll have to edit the code for differents browsers