src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -516,8 +516,11 @@ const selectSalesPersonId = (id) => {
         <div id="st-actions"></div>
     </QToolbar>
 
-    <QPage class="column items-center q-pa-md">
+    <QPage class="column items-center q-pa-md"
+        style="min-height:auto;max-height: 80vh"
+    >
          <QTable
+            style="min-height: 77vh"
             :columns="columns"
             :pagination="{ rowsPerPage: 12 }"
             :rows="rows"

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -129,6 +129,7 @@ const downloadCsv = () => {
             url="InvoiceOuts/filter"
         >
             <template #body="{ rows }">
+                <QHeader>
                 <QToolbar class="bg-vn-dark justify-end"  >
                     <div id="st-actions">
                         <QBtn
@@ -179,10 +180,12 @@ const downloadCsv = () => {
                             class="q-mr-md"
                         />
                     </div>
-                </QToolbar>
+                </QToolbar></QHeader>
+                <QPageContainer>
                 <div class="flex flex-center q-pa-md">
                     <div class="card-list">
                         <CardList
+
                             :element="row"
                             :id="row.id"
                             :show-checkbox="true"
@@ -240,7 +243,7 @@ const downloadCsv = () => {
                             </template>
                         </CardList>
                     </div>
-                </div>
+                </div></QPageContainer>
             </template>
         </VnPaginate>
     </QPage>
@@ -251,8 +254,19 @@ const downloadCsv = () => {
     width: 100%;
     max-width: 60em;
 }
+.fixed-top{
+    top:50px;
+}
+.q-toolbar{
+    padding-top: 10px;
+}
+.q-header {
+  position: sticky;
+}
+
 </style>
 
+
 <i18n>
 en:
     searchInvoice: Search issued invoice