locked
Textbox/Textarea 100% Width Rendering Bug? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    If you have a div with an input text and/or a textarea, they seem to render past the parent box their in. As you can see in the screenshot below, the red area is a div, and the textbox/textarea pours out of it by 20 pixels.

    If you remove the left/right padding, and the left-right border, then the textboxes are 100%. Doesn't quote seem right to me. Looks like we'd all be stuck making these 96.7% wide to make them fit properly?

    Thursday, February 9, 2012 9:25 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi H,

    This is not unique to Metro Apps or even IE.  You would see this in any browser as well.  When you have a div with an explicit size, use box-sizing:

    <div style="height: 100px; width: 100px; background-color: #B1D16F;">
				<input style="width: 100%; box-sizing: border-box;">
			</div>

    -Jeff

    Jeff Sanders (MSFT)

    Friday, February 10, 2012 2:10 PM
    Moderator