- Change Summary:
-
* Unbreak single line editors. * Make single line editors stop causing the parent width to change. The width was being calculated incorrectly.
- Description:
-
Improve the inline editor size matching and increase the animation speed.
The multi-line inline editors weren't exactly the correct width of the
<pre> it was representing. This is due to how width calculations work in elements with padding, which is a particular problem with textareas. However, the "box-sizing: border-box" CSS rule can fix those calculations on any browser we care about (even as far back as Firefox 1.0, IE8, Safari 3, and Chrome 1). Now inlineEditor will put the textarea into the proper box sizing mode
and calculate widths from that, making the width align properly. For the height, we were using height() and not outerHeight(), giving us
some wrong values and causing a little bit of a jump. outerHeight() makes it match up seamlessly. The buttons fade out when closing the editor, and fade in when opening.
This is nicer than them just disappearing. + Single-line editors didn't properly calculate the space they needed, and
+ could cause the parent size to change. We now factor in margins and set + the width using outerWidth() instead of width(). + And finally, to make it feel smoother, the animation speed has increased
by 150ms. It's also customizable now, so callers can always specify different speeds (and we don't have magic values). - Diff:
-
Revision 2 (+39 -22)
Improve the inline editor size matching and increase the animation speed.
Review Request #3540 — Created Nov. 20, 2012 and submitted
Improve the inline editor size matching and increase the animation speed. The multi-line inline editors weren't exactly the correct width of the <pre> it was representing. This is due to how width calculations work in elements with padding, which is a particular problem with textareas. However, the "box-sizing: border-box" CSS rule can fix those calculations on any browser we care about (even as far back as Firefox 1.0, IE8, Safari 3, and Chrome 1). Now inlineEditor will put the textarea into the proper box sizing mode and calculate widths from that, making the width align properly. For the height, we were using height() and not outerHeight(), giving us some wrong values and causing a little bit of a jump. outerHeight() makes it match up seamlessly. The buttons fade out when closing the editor, and fade in when opening. This is nicer than them just disappearing. Single-line editors didn't properly calculate the space they needed, and could cause the parent size to change. We now factor in margins and set the width using outerWidth() instead of width(). And finally, to make it feel smoother, the animation speed has increased by 150ms. It's also customizable now, so callers can always specify different speeds (and we don't have magic values).
Tested with all the multi-line inlineEditors I found in the product.