search

daniel-nagy / fixed-table-header

Fixed table header directive.
MIT License
88 stars 36 forks source link

layout fill on the table #11

Open WDShannon opened 8 years ago

WDShannon commented 8 years ago

in your codepen example, you set md-table-container { max-height: 300px; } so that the table would be no larger than 300px and would scroll the internal content, but is there a way to set flex or layout-fill on that table-container so that it will always use up the available space, and then scroll inside? This would stop there from ever being 2 scroll bars.

Right now I end up picking an arbitrary max height to try to get it to fill inside the container and I don't like doing so.

WDShannon commented 8 years ago

Also, you have a typo on line 25 of that codepen that stops the table from rendering correctly.

`

` You forgot the 'y' in layout.
daniel-nagy commented 8 years ago

Yes flexbox will work. It's just a matter of having your layout correct to allow the container to grow and shrink.

Maybe when I fix the codepen I'll demonstrate how you can make it work with flexbox.

WDShannon commented 8 years ago

This pen here demo's the issue I am having. Probably more to do with my layout, but I'm still learning the flexbox. What can I do to get this working correctly? It seems to work right in chrome but in IE i get the second scroll bar.

CODEPEN

oglematt commented 8 years ago

I'm having a similar issue that is well illustrated in the codepen from @WDShannon. It's possible it's related to my layout, but your md-data-table object works perfectly the fixed header. I should also note that interacting with the table (selecting rows) rows seems to "fix" any height / alignment issues.

jraadt commented 8 years ago

I had a situation where I couldn't give a fixed height either. I reworked fixed-table-header to use Angular Material's $mdSticky service, taking cues from md-subheader. It seems to work great now when it's inside an md-content tag or a flex container. See pull request #15.