CODEWITHSUNDEEP
htmlcsstextarea
JKJ
JKJ

Reputation: 575

Wrap textarea input around a div

I've got a textarea field with a div box in the top right corner. I've searched far and wide but I can't find a way of having the text which is entered into the textarea wrap around that div.

#wrapper {
  position: relative;
  width: 500px;
  height: 500px;
}

#logo {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 10px;
  background-color: cyan;
}

textarea {
  width: 100%;
  height: 100%;
}
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="wrapper">
    <div id="logo">LOGO</div>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam acumsan fringila lacus, in rhoncus ligula pretium eu. Nulam blandit vel quam ut posuere. Sed tincidunt comodo lacinia. Vivamus eget ulamcorper sapien. Phaselus gravida pretium sem, non fringila orci luctus vel. Donec augue sapien, pharetra portitor fringila hendrerit, ultrices in telus. In aliquet laoret turpis vitae ultrices. Praesent eget nula et telus pelentesque suscipit ac eu est. Nula sed imperdiet dui. Donec eficitur est dolor, nec placerat ex posuere pretium.</textarea>
  </div>
</body>

</html>

Upvotes: 4

Views: 2427

Answers (1)

Sylvain
Sylvain

Reputation: 417

I found this pretty ancient discussion: Unusual shape of a textarea?

The answer that is given is to use the contenteditable property on a div.

I manage to get this code that seems to be what you're looking for.

<html>

<head>
  <title></title>
  <meta charset="utf-8" />

  <style>
    #wrapper {
      width: 500px;
      height: 500px;
    }
    
    #logo {
      width: 100px;
      height: 100px;
      float: right;
      background-color: cyan;
    }
    
    .textarea {
      width: 100%;
      height: 100%;
    }
    
    <html><head><title></title><meta charset="utf-8" /><style>#wrapper {
      width: 500px;
      height: 500px;
    }
    
    #logo {
      width: 100px;
      height: 100px;
      float: right;
      background-color: cyan;
    }
    
    .textarea {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="logo">LOGO</div>
    <div class='textarea' contenteditable='true'>HTML</div>
  </div>
</body>

</html>

</style>
</head>

<body>
  <div id="wrapper">
    <div id="logo">LOGO</div>
    <div class='textarea' contenteditable='true'>HTML</div>
  </div>
</body>

</html>

I just replace the <textarea> with <div class='textarea' contenteditable='true'> and the position: absolute; with float:right;.

Upvotes: 2

Related Questions