12M_DotNet_Projects/2025_Vuejs_Mpi_Panel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement custom scrollbar for DataTable component. Refactor structure to include a scrollable wrapper and synchronize scroll positions between the table and the custom scrollbar. Update styles for improved visibility and functionality of the scrollbar.

Browse Source
This commit is contained in:
burakovec
2025-12-18 12:36:51 +03:00
parent bf9c2b25f9
commit edb1d23d71
2 changed files with 144 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/assets/style/default.css
View File

@ -1246,6 +1246,44 @@ section {
padding: 10px;
}
.list-wrapper-container {
width: 100%;
position: relative;
}
.list-wrapper-scrollbar-top {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: 17px;
margin-bottom: 0;
display: none;
position: relative;
z-index: 10;
}
.list-wrapper-scrollbar-top .scrollbar-content {
height: 1px;
width: 0;
}
.list-wrapper-scrollbar-top::-webkit-scrollbar {
height: 17px;
}
.list-wrapper-scrollbar-top::-webkit-scrollbar-track {
background: transparent;
}
.list-wrapper-scrollbar-top::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.list-wrapper-scrollbar-top::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.list-wrapper {
width: 100%;
position: relative;
@ -2374,6 +2412,14 @@ section {
width: 100% !important;
}
.list-wrapper-container {
overflow: visible;
}
.list-wrapper-scrollbar-top {
display: none !important;
}
.list-wrapper {
overflow: visible;
overflow-x: visible;