Fix center tab issue

see vuetifyjs/vuetify#4733
jbl2024 · May 24, 2020 · 40dec12 · 40dec12
1 parent 9575a83
commit 40dec12
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/imports/ui/administration/AdministrationPage.vue b/imports/ui/administration/AdministrationPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="administration-page">
     <template v-if="isConnected && isAdmin">
-      <v-tabs>
+      <v-tabs ref="tabs" v-resize="centerTabs" centered class="sticky-tabs">
         <v-tabs-slider color="accent" />
         <v-tab id="tab-dashboard">
           {{ $t('Dashboard') }}
@@ -49,6 +49,24 @@ export default {
   },
   computed: {
     ...mapGetters(["isConnected", "isAdmin"])
+  },
+  methods: {
+    centerTabs() {
+      setTimeout(() => {
+        this.$refs.tabs.onResize();
+      }, 500);
+    }
   }
 };
 </script>
+
+<style scoped>
+.administration-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+</style>
diff --git a/imports/ui/projects/ProjectSettings.vue b/imports/ui/projects/ProjectSettings.vue
@@ -2,7 +2,7 @@
   <div class="project-settings">
     <v-progress-linear v-if="!currentProject" indeterminate />
     <div v-else>
-      <v-tabs class="sticky-tabs">
+      <v-tabs ref="tabs" v-resize="centerTabs" centered class="sticky-tabs">
         <v-tabs-slider color="accent" />
         <v-tab id="tab-general">
           {{ $t("Settings") }}
@@ -75,6 +75,13 @@ export default {
       }
       return project;
     }
+  },
+  methods: {
+    centerTabs() {
+      setTimeout(() => {
+        this.$refs.tabs.onResize();
+      }, 500);
+    }
   }
 };
 </script>