You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2021/01/15 13:07:40 UTC

[incubator-datalab] 01/01: [DATALAB-2235]: Made sticky header and visible buttons during scroll down

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DATALAB-2235
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git

commit 7622885ed8070a5fcdc7e8674c003bbcbbb1490d
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Jan 15 15:07:08 2021 +0200

    [DATALAB-2235]: Made sticky header and visible buttons during scroll down
---
 .../project/project-list/project-list.component.html       |  5 +++--
 .../project/project-list/project-list.component.scss       | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
index 05efd9c..a838dc9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
@@ -16,8 +16,8 @@
   ~ specific language governing permissions and limitations
   ~ under the License.
   -->
-
-<table mat-table [dataSource]="dataSource" class="projects-table mat-elevation-z6 selection">
+<div class="table-wrapper scrolling">
+  <table mat-table [dataSource]="dataSource" class="projects-table mat-elevation-z6 selection">
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef class="name"> Project name </th>
     <td mat-cell *matCellDef="let element" class="name"> {{element.name}} </td>
@@ -113,3 +113,4 @@
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
+</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
index 9f0ad31..80d1a87 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
@@ -17,6 +17,20 @@
  * under the License.
  */
 
+
+.table-wrapper{
+  height: calc(100vh - 120px);
+  overflow: auto;
+  position: relative;
+  margin:  0 -15px -15px -15px;
+  padding: 0 15px 15px 15px;
+  .mat-header-cell {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background: white;
+  }
+}
 table {
   width: 100%;
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org