Search code examples
htmlcss

Button inside TextArea in HTML

I am looking to create a structure, in which a button is aligned to the top right of a textarea. I was able to do that using CSS positioning. When I start typing inside the textarea, the text comes below the button. Is there a way so that the text normally occupies the full width of the text area, but on reaching the bounds of the button, gets wrapped to the next line?

Solution

  • There is always an option to use contentEditable attribute on an inline element instead of <textarea> and put it next to a floating button.

    div {
  border: 1px solid gray;
  width: 15em;
  height: 5em;
  overflow-y: scroll;
}

button {
  float: right;
}
    <div>
  <button>press me</button>
  <span contenteditable="true">editable</span>
</div>

    jsFiddle