How to overlay divs on the right of each line in a textarea

user_8960551 0
Viewed 51

I want to right-align text to each line in a textarea that a user is typing like this:

Numi screenshot

It should also support scrolling like this (see how the top is cut off when it's out of view?):

Scrolled numi screenshot

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:

Align right hover and click

textarea css html javascript
1 Answers

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.

user_64852490
Related