0
103
VistasHow to overlay divs on the right of each line in a textarea
I want to right-align text to each line in a textarea that a user is typing like this:
It should also support scrolling like this (see how the top is cut off when it's out of view?):
How might I go about doing that?
EDIT:
Also, any div on the right should animate on hover and when clicked, the contents should be copied to clipboard. Like so:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Just make two different text areas and put one at left and second to right. Then make them look visually like one: for left make border-right: 0; for right - border-left: 0;
For your task you could use texterea and div like that:
* {
margin: 0;
padding: 0;
}
.textarea-block {
box-sizing: border-box;
display: inline-block;
border: 1px solid #eee;
padding: 10px;
width: 400px; /* Here you could use % or wh to make it looks better in your app */
}
/* Don't forget to make a clearfix after floats */
.textarea-block:after {
content: '';
clear: both;
}
.left {
font-family: Arial;
font-size: 16px;
border: 0;
width: 50%;
}
.right {
font-family: Arial;
font-size: 16px;
display: inline-block;
text-align: right;
width: 50%;
float: right;
}<div class="textarea-block">
<textarea name="" cols="30" rows="10" class="left">First line
Second line</textarea>
<div class="right">
First line <br>Second line
</div>
</div>Just be sure to make the same font-size and font-family to textarea and div to make text looks same.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta