diff --git a/aleksis/core/frontend/components/generic/CRUDIterator.vue b/aleksis/core/frontend/components/generic/CRUDIterator.vue index ef3f7d1dec0734c5509493ebe3921da0cd556c16..85335c268b566d07e67c331b14f72b1e038d111a 100644 --- a/aleksis/core/frontend/components/generic/CRUDIterator.vue +++ b/aleksis/core/frontend/components/generic/CRUDIterator.vue @@ -57,6 +57,10 @@ <slot name="additionalActions" :attrs="attrs" :on="on" /> </template> </c-r-u-d-bar> + <div + v-if="fixedHeader" + class="c-r-u-d-iterator-fixed-header-placeholder" + /> </template> <template #default="slotProps"> @@ -136,6 +140,15 @@ export default { ? this.$attrs.headers.filter((header) => !header.disableEdit) : []; }, + fixedHeaderTop() { + return `${this.$vuetify.application.top}px`; + }, + fixedHeaderWidth() { + return `calc(100vw - ${this.$vuetify.application.left}px - ${this.$vuetify.application.right}px)`; + }, + fixedHeaderLeft() { + return `${this.$vuetify.application.left}px`; + }, }, methods: { handleItems(items) { @@ -168,9 +181,17 @@ export default { <style lang="scss"> .c-r-u-d-iterator-fixed-header { - position: sticky; - /* TODO: This should use the v-toolbar height instead. But it is not accessible here. */ - top: 64px; + position: fixed; + width: v-bind(fixedHeaderWidth); + left: v-bind(fixedHeaderLeft); + top: v-bind(fixedHeaderTop); z-index: 3; } + +.c-r-u-d-iterator-fixed-header-placeholder { + height: v-bind(fixedHeaderTop); + position: sticky; + top: v-bind(fixedHeaderTop); + z-index: 2; +} </style>