Grow your CSS skills. Land your dream job.

can a textarea auto-fit within a div?

  • # July 24, 2010 at 1:53 pm

    I must be missing something obvious here, but can’t work it out. In the html below, which is a simple textarea inside a fixed-width DIV, I want to make the textarea fit itself width-wise within the width of the div, with a nice little margin around the outside.

    The result I want is this:
    [img]http://img44.imageshack.us/img44/1007/boxdiv1.gif[/img]
    But what I’m getting is this:
    [img]http://img691.imageshack.us/img691/8113/boxdiv2.gif[/img]

    I’ve tried various combinations of margin & padding for both the div and textarea, but it doesn’t want to fit. Can someone advise me as to what the correct css should be, so the textarea resizes to the width of the div, with a 5px margin around the edge?

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Cheers!

    # July 24, 2010 at 5:51 pm

    The problem is likely that you’ve set the text area width to 100% and also added padding. You can try removing the padding, but that’s often not ideal. Is it common that the parent element of the text area changes in width? If not, skip the % width and set it statically.

    # July 24, 2010 at 11:24 pm

    Yeah, and when you set it statically, don-t forget to subtract the padding for each side.

    # July 25, 2010 at 3:43 am
    "chriscoyier" wrote:
    Is it common that the parent element of the text area changes in width? If not, skip the % width and set it statically.

    Thanks, but yes it does in a way.. I wanted to just set a single style to apply to all textareas, so wherever they appear, they end up being as big as their container allows. So it will be various widths at various times. Regardless, I thought dynamic resizing was easy to do in CSS, but the content-box model makes it damn difficult.

    Thank god CSS3 is formalising border-box as an options. I can see lots of people wanting to use it for web apps. Apps are often different animals to normal pages, and we need good design tools to make them app-like. W3C is on another planet in that respect.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".