Use flex in responsive demo

primefaces · Jan 11, 2021 · a0201cd · a0201cd
1 parent 785a41a
commit a0201cd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/src/app/showcase/components/table/tabledemo.html b/src/app/showcase/components/table/tabledemo.html
@@ -133,6 +133,7 @@ <h1>Table</h1>
                         {{customer.date | date: 'MM/dd/yyyy'}}
                     </td>
                     <td>
+                        <span class="p-column-title">Balance</span>
                         {{customer.balance | currency:'USD':'symbol'}}
                     </td>
                     <td>

diff --git a/src/app/showcase/components/table/tabledemo.scss b/src/app/showcase/components/table/tabledemo.scss
@@ -75,23 +75,23 @@
 
                     > td {
                         text-align: left;
-                        display: block;
-                        border: 0 none !important;
-                        width: 100% !important;
-                        float: left;
-                        clear: left;
+                        width: 100%;
+                        display: flex;
+                        align-items: center;
                         border: 0 none;
 
                         .p-column-title {
-                            padding: .4rem;
                             min-width: 30%;
                             display: inline-block;
-                            margin: -.4rem 1rem -.4rem -.4rem;
                             font-weight: bold;
                         }
-
-                        .p-progressbar {
-                            margin-top: .5rem;
+
+                        p-progressbar {
+                            width: 100%;
+                        }
+
+                        &:last-child {
+                            border-bottom: 1px solid var(--surface-d);
                         }
                     }
                 }

diff --git a/src/app/showcase/components/table/tableresponsivedemo.scss b/src/app/showcase/components/table/tableresponsivedemo.scss
@@ -15,17 +15,14 @@
 
                 .p-datatable-tbody > tr > td {
                     text-align: left;
-                    display: block;
                     width: 100%;
-                    float: left;
-                    clear: left;
+                    display: flex;
+                    align-items: center;
                     border: 0 none;
 
                     .p-column-title {
-                        padding: .4rem;
                         min-width: 30%;
                         display: inline-block;
-                        margin: -.4em 1em -.4em -.4rem;
                         font-weight: bold;
                     }