table height is not flexible

[BennyAlex]

When giving the table a height, the table height is always fixed even if there are no records.
So I want to have a feature for setting the max-height so the table height would be maximal as high as the definded height, but when there are no records or just a few it would be smaller then the defined height

[offirgolan]

This can be done by setting the height to auto and then wrapping the container of your table using flexbox. This will allow your table to grow / stretch.

[offirgolan]

Closing as this issue has been abandoned. Feel free to reopen if needed.

[Syzygy24]

@offirgolan Could you provide an example of this?

[lcherukuri]

@offirgolan Could you provide an example

[offirgolan]

Ember Twiddle

This will work for fixed header / footer as well. Check out app.css for the container styles.

[lcherukuri]

Even with the new changes the height of table remained constant (same as container height) irrespective of row count https://ember-twiddle.com/1321a9735b05f9500b1f71243fd5d148?openFiles=styles.app.css%2C

[buschtoens]

irrespective of row count

That's not how it works. You either can use fixed headers and make the table adopt to the container (or have an otherwise defined height) or you don't use fixed headers but get to use the table's intrinsic height.

That's a limitation of CSS. I'm sorry.

If you absolutely must use fixed headers and a row count dependent height, you could compute the height (via a computed property with dependent key table.visibleRows.length for instance).

[lcherukuri]

👍

[Techn1x]

I'm also interested in both having a fixed header and collapsible table...

I'm guessing adding a collapsibleHeight=true attribute (or something like that) to table which would calculate that height automatically based on table.visibleRows.length when the header is fixed would be out of scope / slow / a bad idea?

[buschtoens]

Well there are different solutions to this problem. One would be defining an explicit fixed row height and multiplying that by table.visibleRows.length.

Alternativel we could read the scrollHeight property of the scrollable content and use it to explicitly set the height of the scroll box / table.

This is something that could also be built into ember-scrollable itself. I think e-s keeps track of the scroll height anyways. Not sure though.

@alexander-alvarez Thoughts?

[alexander-alvarez]

I'm not sure of a super nice way to do this given the current setup with e-s..
I'm pretty sure this issue relates to this one alphasights/ember-scrollable#85 (comment)