Scrolls don't appear when content is inserted

[roman-gula]

For example when using ajax to get some text.

component.js:

$.get({
    url: 'http://server.com/get-text',
    dataType: 'text'
}).then(data => {
    this.set('text', data)
});

component.hbs:

{{#ember-scrollable horizontal=true vertical=true}}{{text}}{{/ember-scrollable}}

It is necessary to wrap ember-scrollable into {{#if text}}{{/if}}.

[billdami]

I've also noticed this, but in the other direction as well, namely, the scroll bar is not removed, or its height is not changed, when content is removed such that the ember-scrollable container should no longer scroll, or doesnt need to scroll as much.

Basically, any interactions/modifications that cause a change in the scroll content dimensions other than a window resize doesn't trigger a scroll size recalculation.

While not ideal, this issue could probably be mitigated by having some sort of imperative action/event that is sent to the component to force a scroll recalculation, is there any way to do this currently?

[alexander-alvarez]

Right now we have no real notion of dynamic height of the scroll content, and we pass in the size as so: https://github.com/alphasights/ember-scrollable/blob/master/addon/templates/components/ember-scrollable.hbs#L31..L32

you may be able to use the actions yielded here to trigger a resize. This is the implementation of those methods https://github.com/alphasights/ember-scrollable/blob/master/addon/components/ember-scrollable.js#L448...L470 eventually call https://github.com/alphasights/ember-scrollable/blob/master/addon/components/ember-scrollable.js#L239..L240

[billdami]

@alexander-alvarez thanks for the response on this. I was able to actually solve my immediate use case roughly how you suggested, I used the actionReceiver property exposed by ember-component-inbound-actions, and fire the recalculate action in my parent controller with it, and it seems to work as expected:

{{#ember-scrollable actionReceiver=myScrollable}}...{{/ember-scrollable}}

myContentDidChange: observer('myContent', function() {
  this.get('myScrollable').send('recalculate');
})

[billdami]

^ This might be something worth mentioning in the docs too

[westd]

i'm finding that set height="auto" and using flexbox to size the table to full available height results in a blank content. It looks like the twiddle posted above has the same problem, there is no content visible? https://ember-twiddle.com/071a58e410a17c64b8a0eee205d6be44?openFiles=templates.application.hbs%2C