Improve $.autoSizeTextArea with padded textareas and different fonts.
Review Request #6464 — Created Oct. 19, 2014 and submitted — Latest diff uploaded
$.autoSizeTextArea
worked very well when the proxy element and
<textarea>
matched up perfectly (in terms of margins/padding and fonts)
and padding wasn't used in the text area. However, if one of these
conditions weren't true, incorrect heights would end up being
calculated.We now assume that a minimum height is the full height of the field,
which may include padding. Since we are setting usingheight()
, which
expects a content height without padding, we need to subtract any
padding that may be there. This helps to provide the heights that the
caller would expect.We also set some sane defaults for the proxy element, removing any
margins, padding, and borders that may be there, and ensuring the font
is the same as the textarea.This also updates
setMinHeight()
to trigger an auto-size. It was strange
that it didn't before, and that it was up to the caller to explicitly
trigger an auto-size.
Tested with some of the work I'm doing for a hybrid textarea/CodeMirror widget.
I was able to get consistent minimum heights, which was failing before.