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

Fixed height calculations when using padding #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

larssn
Copy link

@larssn larssn commented Jul 3, 2017

scrollHeight includes padding, normal element height does not. This commit fixes that problem by subtracting the padding when setting height.

getComputedStyle always returns the unit in pixels, so the code should still work even if you're using em or rem as your padding unit.


constructor(
private element: ElementRef,
private ngZone: NgZone,
@Optional() private model: NgModel
) {}
) { }
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please could you recommit without the extra whitespace?


ngOnInit() {
if(!this.model) {
if (!this.model) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As above

Copy link
Owner

@fiznool fiznool left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks very much for submitting this. There's a few changes I think we need before this can be merged.

master has also moved on since this PR was issued so if you could rebase and reimplement using the new master it would be much appreciated.

Thanks!

@@ -30,7 +31,7 @@ export class ElasticDirective implements OnInit, OnDestroy, AfterViewInit {
}

ngOnDestroy() {
if(this.modelSub) {
if (this.modelSub) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As above

@@ -87,6 +92,6 @@ export class ElasticDirective implements OnInit, OnDestroy, AfterViewInit {
}

this.textareaEl.style.height = 'auto';
this.textareaEl.style.height = this.textareaEl.scrollHeight + "px";
this.textareaEl.style.height = this.textareaEl.scrollHeight - this.totalVerticalPadding + "px";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The most recent commit uses a backtick string so let's do the same here.

const paddingTop = window.getComputedStyle(this.textareaEl).getPropertyValue('padding-top').replace('px', '');
const paddingBottom = window.getComputedStyle(this.textareaEl).getPropertyValue('padding-bottom').replace('px', '');
this.totalVerticalPadding = +paddingTop + +paddingBottom;

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer to make a few changes here.

  • Let's cache the result of getComputedStyle in a variable so it isn't calculated twice.
  • Let's use parseInt() instead of the unary + operator, as this is consistent with elsewhere in the file.

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

Successfully merging this pull request may close these issues.

2 participants