Skip to content
Snippets Groups Projects
Verified Commit e033c9c7 authored by Julian's avatar Julian Committed by Jonathan Weth
Browse files

Make CrudIterator fixed header full width of page

parent 06c49a63
No related branches found
No related tags found
1 merge request!1456Enable fixed header in CRUDIterator
Pipeline #181828 failed
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment