Open MarioVanDenEijnde opened 7 years ago
You can also use CSS position sticky attribute for this purpose. This attribute works on Safari and this was also introduced in Google Chrome, recently. On IE, it's not yet fully implemented.
http://codepen.io/SitePoint/pen/hewAv
Pull requests and plugins welcome :-)
See
I looked into the issue and here are my finds:
position: sticky
does not work in thead by design
the proposed workaround is to apply position: sticky
to th elements but in F7 will not work because it also does not work inside overflow: auto. See Example
other workaround is to create a separate table with the header and apply position: sticky
in the div.data-table element. It works but the header position is misaligned. Example.
Finally use transform: translateY
as proposed here. This is the solution that works better with minimal code. See Example. But also has a issue. Under Chrome the thead is transparent regardless of setting background. In Firefox the background is opaque as expected.
Glad if someone can point a why the background is transparent in Chrome so we can create a plugin for F7
If you use Vue.js, try this: https://www.npmjs.com/package/vue-floatthead
For me it worked like a charm!
This is a (multiple allowed):
[ ] bug
[x] enhancement
[ ] feature-discussion (RFC)
Framework7 Version: 1.6.0.
Platform and Target: Chrome, ETC.
What you did
The table is populated using script (template7) Tried including: http://www.fixedheadertable.com/ https://github.com/jmosbech/StickyTableHeaders
Expected Behavior
Keep the tableheader fixed at the top
Actual Behavior
Does not stick