diff --git a/js/about/preferences.js b/js/about/preferences.js
index 06b7628bf3c..bf7b1cd41c9 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -20,6 +20,7 @@ const {passwordManagers, extensionIds} = require('../constants/passwordManagers'
const aboutActions = require('./aboutActions')
const getSetting = require('../settings').getSetting
const SortableTable = require('../components/sortableTable')
+const FixedHeaderTable = require('../components/fixedHeaderTable')
const Button = require('../components/button')
const searchProviders = require('../data/searchProviders')
const moment = require('moment')
@@ -258,11 +259,11 @@ class LedgerTable extends ImmutableComponent {
return null
}
return
-
this.enabledForSite(item) ? '' : 'paymentsDisabled').toJS()
diff --git a/js/components/fixedHeaderTable.js b/js/components/fixedHeaderTable.js
new file mode 100644
index 00000000000..e9a31ba88ec
--- /dev/null
+++ b/js/components/fixedHeaderTable.js
@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('./immutableComponent')
+const SortableTable = require('./sortableTable')
+
+class FixedHeaderTable extends ImmutableComponent {
+ render () {
+ return
+ }
+}
+
+module.exports = FixedHeaderTable
diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
index 0db78698607..64f81bb9a63 100644
--- a/js/components/sortableTable.js
+++ b/js/components/sortableTable.js
@@ -80,9 +80,10 @@ class SortableTable extends ImmutableComponent {
return |
+ data-sort-order={this.props.defaultHeadingSortOrder}>
+
+
})}
diff --git a/less/about/preferences.less b/less/about/preferences.less
index c82ecf0747d..f73fe619e1d 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -549,8 +549,6 @@ table.sortableTable {
}
#ledgerTable {
- height: ~"-webkit-calc(100vh - 300px)";
- overflow-y: auto;
tr {
th,
@@ -559,6 +557,42 @@ table.sortableTable {
}
}
+ .fixed-table-container {
+ height: 500px;
+ position: relative;
+
+ .table-header {
+ height: 30px;
+ background: @veryLightGray;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ }
+
+ .fixed-table-container-inner {
+ overflow-x: hidden;
+ overflow-y: auto;
+ height: 100%;
+
+ table {
+ width: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ .th-inner {
+ color: @darkGray;
+ font-weight: 600;
+ position: absolute;
+ top: 0;
+ line-height: 30px;
+ z-index: 9;
+ background: @veryLightGray;
+ }
+ }
+ }
+ }
+
}
.modal .dialog.paymentHistory .sectionTitle {