Grow your CSS skills. Land your dream job.

Trouble sizing a textarea inside a div

  • # March 15, 2013 at 11:02 am

    I’m new here, having spent a few days looking at demos and lurking on your forums, but now I’m having an issue that I can’t seem to solve.

    I think [this](http://codepen.io/esdictor/pen/lKudE “CodePen”) illustrates the problem.

    I have a div that, when clicked, contains a textarea that the user can edit. Then, when the textarea loses focus, it is removed and the text is updated in the div.

    No matter what I do, I can’t seem to reliably position the textarea inside the div in a way that shows the same in different resolutions.

    Hopefully someone can help with this.

    Evan

    # March 15, 2013 at 11:28 am

    @ESDictor,

    Why not try adding

    textarea {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    }

    Better yet, why not just put a textarea over your div and set its placeholder to what you want?

    http://codepen.io/johnmotyljr/pen/eHFyl

    # March 15, 2013 at 11:42 am

    @JohnMotylJr I think that works perfectly for me. Even if there are some things I need to change, I’m pretty sure you’ve covered everything I need.

    Are there any browser issues with box-sizing? I have to support IE9 for this.

    Thanks,
    Evan

    # March 15, 2013 at 12:50 pm

    Border-Box is supported IE8 on up, refer to [Can I Use Box-Sizing](http://caniuse.com/css3-boxsizing “”). If you need to attack IE7 > then I would reccomend using Paul Irish’s suggestion for [IE CSS Targeting](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ “”).

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".