How do I reset ember-table height after update - my new rows are hidden until scroll

Question

Is there an easy way to reset the height after updating the ember-table?

I'm adding items to the table on the fly and want to show them in the table as I add them. The bindings work, but my new rows are all hidden due to the table's set height and overflow: hidden.

Here's a jsbin. Two seconds after page load, I add a row and you'll notice the height of the table remains set, and you need to scroll the table to view the new row.

UPDATE

Updated jsbin: "works" but feels very hacky

I've dug through ember-table's javascript, found a couple properties to set, and got it "working" by overriding one css style.

A couple remaining issues:

• It looks like something is going on with the scrollbar now though. After the change, the scrollbar appears, but isn't going to work since the content is as high as the container. There seems to a lot of javascript around the scrolling aspect of it all.

• Feels really hacky. This kind of functionality seems like it should be a configuration setting (or even the default functionality) for ember-tables

Answer 1

EDIT: This is now fixed on ember-table master, as of https://github.com/Addepar/ember-table/commit/9de978d8e6299a9429881b2ec212dcb79c49722f.

This is an issue with Ember Table and has been filed in the issue tracker there. Until there's a better solution (and we welcome pull requests!), your best option is probably a workaround like you have now.

By the way, I've broken both of your JS Bins by updating ember table. Sorry about that. Now that we have versioning, this shouldn't happen in the future. To update your examples, just paste in the dependencies from the new starter kit.

More discussion can be found here or here in the Ember Table issues. I have another JS Bin which illustrates the issue: http://emberjs.jsbin.com/nedac/3/edit.