Fixed width div/textarea with no scroll bars needs to expand to content

Posted on 2008-11-17
Last Modified: 2012-05-05
Hi Experts,

 I have some dynamic text content that I need to echo. I want it to fill a space 580px in width. Should the content exceed 580 it needs to wrap and expand either the div or the texarea. I have got this to work using a textarea and wrap="virtual' in Safari but it produces on long line of text and a scroll bar in FF and IE.
I have tried max-width but that only works in Saf too.
Is this possible? It seems basic but i can't seem to find an example that works in the knowledge base.

Thanks for any help.
Question by:RowdyBurns
    LVL 2

    Expert Comment

    This is what someone else posted on here.



    function MakeSizeAdjustment(oTextArea)
          if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0)

          while (oTextArea.scrollHeight > oTextArea.offsetHeight)



    The amazing, incredible, expanding text-area:
    <textarea style="overflow:visible;width:30%" rows="3" onkeyup="MakeSizeAdjustment(this)">Some Test Text</textarea>


    Author Comment

    EEErm. This still displays scroll bars in FF.
    LVL 44

    Accepted Solution

    DIVS and text areas will ALWAYS show scroll bars if the content exceeds the DIV height -- with DIVs you can elminate the scroll bars with --

    DIV {scroll-y:no; scroll-x:no;}

    with text area, you cannot solve this.  Why not just use a table?  If the user can't edit the content, just put it in a table and the table cell will automatically fill the table and wrap correctly without ANY scroll bars --

    <TABLE width="580">
         <TD width="580"> content here </TD>

    that is guaranteed to work, no matter how big the content is.

    Author Closing Comment

    Thank you for having a look at this.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    Both Easy and Powerful How easy is PHP? (  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now