search

LeaVerou / stretchy

Form element autosizing, the way it should be
https://stretchy.verou.me/
Other
1.27k stars 87 forks source link

extra height on textboxes when `box-sizing: border-box` and `min-height` set #28

Open anfedorov opened 7 years ago

anfedorov commented 7 years ago

http://codepen.io/anfedorov/pen/xqWPja

macfire commented 7 years ago

Possible fix is to change line ~55 in test for "border-box":

     if (cs.boxSizing == "border-box") {
          offset = 10; // element.offsetHeight;
      }

Setting offset to the original element.offsetHeight appears to be creating the extra height. Changing offset to 0 works, but a few extra pixels will help avoid having the scrollbar. Could be that it needs to be based on lineHeight.

(This suggestion replaces my recommendation for a conditional test as detailed on #23. It accomplishes the same thing.)

Update: http://codepen.io/anon/pen/XMEzxq

anfedorov commented 7 years ago

sorry about confusion, long day.

I think the scroll bars you're talking about come from the border being set to something wider than default. for that issue and the one this ticket describes, this fix works in Chrome: https://gist.github.com/4b597ecc70e5556d271ffdc2a0099d63

could you please double check it against your examples before I test it in all browsers and make a pull request?

anfedorov commented 7 years ago

seems to work: http://codepen.io/anfedorov/pen/zZWjEX

right?

macfire commented 7 years ago

Yes. Both Safari and Firefox (Mac) test correctly.

Thanks.