Merge pull request #199 from HC200ok/feature/rows-selector-zIndex-css…

…-variable Feature/rows selector z index css variable
HC200ok · Jan 7, 2023 · 5ef3919 · 5ef3919
2 parents 60109bf + 0d61caa
commit 5ef3919
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.5.24",
+  "version": "1.5.25",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
@@ -626,6 +626,7 @@ defineExpose({
     /**footer-rowsPerPage**/
     --easy-table-rows-per-page-selector-width: auto;
     --easy-table-rows-per-page-selector-option-padding: 5px;
+    --easy-table-rows-per-page-selector-z-index: auto;
     /*message*/
     --easy-table-message-font-color: #212121;
     --easy-table-message-font-size: 12px;

diff --git a/src/components/RowsSelector.vue b/src/components/RowsSelector.vue
@@ -140,6 +140,7 @@ const themeColor = inject('themeColor');
     text-align: left;
     list-style-type: none;
     box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
+    z-index: var(--easy-table-rows-per-page-selector-z-index);
     li {
       cursor: pointer;
       padding: var(--easy-table-rows-per-page-selector-option-padding);

diff --git a/src/modes/Client.vue b/src/modes/Client.vue
@@ -315,6 +315,7 @@ const updateRowsPerPageSelect = (e: Event) => {
 
   --easy-table-rows-per-page-selector-width: 70px;
   --easy-table-rows-per-page-selector-option-padding: 10px;
+  --easy-table-rows-per-page-selector-z-index: 2;
 
   --easy-table-scrollbar-track-color: #4c5d7a;
   --easy-table-scrollbar-color: #4c5d7a;