Forums

ESDictor

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

JohnMotylJr

@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

ESDictor

@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

drhees

Border-Box is supported IE8 on up, refer to Can I Use Box-Sizing. If you need to attack IE7 > then I would reccomend using Paul Irish's suggestion for IE CSS Targeting.

treehouse : what would you like to learn today?

Forums

[Solved] Trouble sizing a textarea inside a div