14.10 Add a Scroll Area

src/pages/PageTodo.vue

@@ -1,12 +1,14 @@
 <template>
-  <q-page class="q-pa-md">
+  <q-page>
+
+    <div class="q-pa-md absolute full-width full-height column">
 
       <div class="row q-mb-lg">
         <search />
         <sort />
       </div>
 
-    <div class="relative-position">
+      <q-scroll-area class="q-scroll-area-tasks">
         <p
           v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
           No Search Results
@@ -20,8 +22,9 @@
 
         <tasks-completed
           v-if="Object.keys(tasksCompleted).length"
-        :tasksCompleted="tasksCompleted" />
-    </div>
+          :tasksCompleted="tasksCompleted"
+          class="q-mb-xl" />
+      </q-scroll-area>
 
       <div class="absolute-bottom text-center q-mb-lg">
         <q-btn
@@ -33,6 +36,8 @@
         />
       </div>
 
+  </div>
+
     <q-dialog v-model="showAddTask">
       <add-task @close="showAddTask = false" />
     </q-dialog>
@@ -75,3 +80,10 @@ export default {
   }
 }
 </script>
+
+<style>
+  .q-scroll-area-tasks {
+    display: flex;
+    flex-grow: 1;
+  }
+</style>