-1

I have a textbox on the left half of (say) a dialog, and an image on the right half. Both the textbox and the image start at the same point vertically, but say the text is much longer than the image.

I would like the text to expand all the way across the dialog once the text is below the image (vertically). Is that possible through the use of CSS/JS?

Note that I have to use a textbox since the text is editable. If it helps, I am developing an AngularJS application and am using flexbox in general for layout.

1 Answer 1

2

Not really with a textarea, but you could do something like this with a contenteditable div.

<img style="float: right;" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" />
<div contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo diam, suscipit sit amet est sed, tempus tristique ex. Nulla ultrices eu odio sit amet sollicitudin. Vivamus condimentum fermentum mattis. Nunc fringilla quam id leo suscipit, nec laoreet dolor ultrices. Nulla scelerisque augue non odio vestibulum, a luctus tellus aliquet. Curabitur eget ipsum ornare, rutrum libero vel, euismod eros. Vivamus tincidunt commodo orci, sed sodales ligula convallis quis. In erat quam, mollis vel rhoncus dapibus, pharetra at nunc. Nunc eget mi et ipsum scelerisque lobortis. Curabitur malesuada quam at varius tempus. Nulla in imperdiet augue. Praesent ultricies libero urna, vitae eleifend dui mattis ac. Etiam pellentesque sodales dui in scelerisque. Sed sed felis elit.</p>

<p>Ut euismod nibh ac sagittis convallis. Curabitur tempor tortor neque, vel accumsan ex malesuada quis. Phasellus id metus condimentum, varius lacus ac, tincidunt leo. Maecenas tincidunt nibh eu nulla aliquet elementum. Donec varius sem aliquam nunc egestas dictum. Curabitur risus leo, semper et diam ut, consectetur congue purus. Proin porttitor sed diam sit amet volutpat. Aliquam lacinia, nibh vitae finibus blandit, dolor ligula ornare magna, ac dignissim arcu odio eget sapien. Sed dictum condimentum posuere.</p>

<p>Cras auctor dolor eu arcu hendrerit, sit amet interdum magna malesuada. Pellentesque at porta mi. Donec fermentum finibus porttitor. Mauris at eros accumsan, tincidunt mauris in, scelerisque sem. Quisque tortor metus, ullamcorper vel mauris ac, pharetra dictum orci. Suspendisse non ullamcorper magna, ac scelerisque velit. Maecenas ut nunc et nunc ultrices tempor. Donec leo felis, vulputate suscipit viverra sed, scelerisque eu tellus. Aenean rhoncus odio nibh. Aliquam ac tellus orci. Vivamus tortor mi, tincidunt quis tortor a, sagittis aliquet felis. Mauris ac mattis mauris, in dictum sapien. Curabitur dignissim ex luctus ex semper consequat. Proin sed quam et massa venenatis fringilla nec eget dolor. Pellentesque eu tellus sodales, faucibus lorem eu, faucibus nulla. Nam eu nulla laoreet, malesuada nulla eget, posuere nisi.</p>

<p>Ut fermentum, magna vitae fringilla elementum, est eros varius metus, nec hendrerit libero mi non est. Quisque vel malesuada ipsum. Aenean venenatis lorem sit amet urna molestie efficitur. Integer ut mi a urna fermentum lacinia at ac lorem. Praesent pellentesque est sed diam interdum viverra. Pellentesque lobortis ipsum congue, vehicula mi at, rutrum turpis. Maecenas sapien arcu, aliquet nec vehicula nec, gravida eget leo. Vestibulum magna est, ultricies at sem sit amet, egestas fermentum dui. Quisque gravida in orci eget ullamcorper. Nunc in lectus ac elit dapibus pulvinar. Morbi diam orci, vulputate eget luctus at, mattis eu nisi. Aenean sit amet lorem a quam placerat consequat. Cras varius tortor sit amet libero posuere maximus.</p>

<p>Integer posuere ligula sapien, id iaculis odio accumsan in. Phasellus molestie quam quis fringilla mattis. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fermentum urna et urna vestibulum faucibus. Pellentesque mauris quam, faucibus et porta et, mollis viverra mauris. Praesent consectetur orci purus, sed sagittis ligula sagittis quis. Integer lacinia ut libero quis feugiat. In ac arcu ac tellus tincidunt egestas lacinia nec neque. Suspendisse viverra velit massa, porta tincidunt nibh finibus vel. Maecenas fermentum nec massa quis tristique. Vivamus ut efficitur elit. Donec tempus, augue congue feugiat luctus, ante metus hendrerit risus, mollis vehicula tortor dolor id odio.</p>
</div>

Beware that content editable elements are more-complex that a simple textarea and allow for formatting and uses HTML underneath.

1
  • Appreciate it. I went through the contenteditable route, but since there is no support for placeholders, I did not use it. I realize that I could possibly add support for placeholders through various proposed methods, but none of them worked because I need to show the placeholder if the text area is empty, regardless of focus. I am just wondering if there was a way to achieve this with a textarea, but I am assuming it is not possible based on your response.
    – AshD
    Commented Nov 5, 2017 at 5:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.