Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

box-sizing: border-box causes the height to be bigger than what it should #51

Closed
gustavohenke opened this issue Jan 19, 2013 · 13 comments
Closed

Comments

@gustavohenke
Copy link

Hey,
I'm using your plugin within Twitter Bootstrap, applying it in a textarea.input-block-level, which has box-sizing: border-box.

This causes the one-line height of the textarea to be bigger than what it should.
I commented the line 70 of the plugin code, than I get the correct initial height of my textarea.

See the image below:
textareas

@jackmoore
Copy link
Owner

Thanks for the report, but I wasn't able to reproduce this problem. Is your "how it should look" actually how it should look, or is that just how you want it to look (as in maybe it is rendering correctly according to your CSS)? What does it look like if you don't use autosize? If autosize is the problem, post a demo and I'll look into it.

@gustavohenke
Copy link
Author

Without using autosize, the textarea gets its original size (which is about 3 rows, the "how should look" is the min-height of the textarea) - have you tried with Bootstrap?

@jackmoore
Copy link
Owner

I didn't try with bootstrap, I just changed the box-sizing.

@jackmoore
Copy link
Owner

And changing the box-sizing did change the total height, but that was independent of using the plugin.

@gustavohenke
Copy link
Author

Sorry, I got out of the wi-fi zone and just updated the comment without refreshing...

This is the .input-block-level CSS:

    -moz-box-sizing: border-box;
    display: block;
    min-height: 30px;
    width: 100%;

@jackmoore
Copy link
Owner

Thanks

@jackmoore
Copy link
Owner

Ok, should be fixed now.

@gustavohenke
Copy link
Author

Oh, thanks! You're awesome!

@crapthings
Copy link

@gustavohenke @jackmoore
i have the same issus, how do u get the height to 30px ?

@nediam
Copy link

nediam commented Jun 20, 2013

Hello, it seams that the problem occurs again, but changing

boxOffset = $ta.outerHeight() - $ta.height();

to

boxOffset = $ta.outerHeight(false) - $ta.height();

does the trick.

@jackmoore
Copy link
Owner

outerHeight is false by default, so your change shouldn't affect anything:
http://api.jquery.com/outerHeight/

@nediam
Copy link

nediam commented Jun 20, 2013

I know but only with "false" it works... (text area have input-block-level class)

@jackmoore
Copy link
Owner

Do you happen to be using jQuery 1.8.0? http://bugs.jquery.com/ticket/12293

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants