Mark Otto Reporter
	Description • 10 years ago

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.78.2 (KHTML, like Gecko) Version/7.0.6 Safari/537.78.2

Steps to reproduce:

A `button` with `width: 100%` within a table cell will not render correctly when available space is less than the space required to render the entire table's contents. Instead of maintaining the width of the button, it's contents are cropped and the width of the button knocked down to the sum of the horizontal padding.

See http://jsfiddle.net/qq465644390/73HeE/4/embedded/result/.

FWIW, https://bugzilla.mozilla.org/show_bug.cgi?id=332171 sounds super similar, but is 8 years old.


Actual results:

Button text is cropped.


Expected results:

Button text and horizontal padding should be preserved when horizontal space is limited.

	Chris Rebert
	Comment 1 • 10 years ago

(Original Bootstrap bug report: https://github.com/twbs/bootstrap/issues/14320 )

	Boris Zbarsky [:bzbarsky]
	Comment 2 • 10 years ago

Mark, is the behavior different than for a <div style="display: inline-block; width: 100%">?  If not, why were you expecting a different behavior for those two cases?

	Mark Otto Reporter
	Comment 3 • 10 years ago

Boris:

divs apparently don't behave the same with as a block level button. I expect the block level, 100% wide button to behave as a div, as it does in every other browser (in that the button's minimum required width is maintained).

	Boris Zbarsky [:bzbarsky]
	Comment 5 • 10 years ago

So I guess the issue here is that buttons are being treated as replaced elements, for which percentage sizing means an intrinsic width of 0 (try it with an <img> for an equivalent comparison).

We could try changing that, but I worry about web compat issues if we do...

	Chris Rebert
	Comment 6 • 9 years ago

I have filed https://www.w3.org/Bugs/Public/show_bug.cgi?id=28904 in the hopes of having the spec clarify whether or not <button> is/can-be/may-be a replaced element.

	Chris Rebert
	Comment 7 • 9 years ago

(In reply to Boris Zbarsky [:bz] from comment #5)
> So I guess the issue here is that buttons are being treated as replaced
> elements,

Hixie said in https://www.w3.org/Bugs/Public/show_bug.cgi?id=23893#c0 that they are NOT replaced elements.

See also https://github.com/whatwg/html/issues/45

	Chris Rebert
	Comment 8 • 9 years ago

(In reply to Boris Zbarsky [:bz] from comment #4)
> Created attachment 8481618 [details]
> Simpler testcase

I checked this in Chrome, Safari, Edge, IE11, and Opera 12, and none of them make the button too narrow like Firefox does.

	Boris Zbarsky [:bzbarsky]
	Comment 9 • 9 years ago

Yes, I know all that.  The point is, some parts of button rendering _do_ act as if they were replaced elements in all browsers.  That's why hixie isn't sure how to spec it.  :(

	Patrick Westerhoff
	Comment 10 • 8 years ago

I was caught by this problem as well, see my question on Stack Overflow here: http://stackoverflow.com/q/34948628/216074. In my case I was able to fix this by using `min-width: 100%` instead of `width: 100%`.

This also seems to be related to bug 332171.

	Patrick Westerhoff
	Comment 11 • 8 years ago

A fix landed yesterday that fixed bug 332171, and from what I see in today’s Nightly build, this issue is now also resolved. So someone close this please :)