diff options
Diffstat (limited to 'plugins/CoreHome')
-rw-r--r-- | plugins/CoreHome/javascripts/dataTable.js | 17 | ||||
-rw-r--r-- | plugins/CoreHome/stylesheets/dataTable/_dataTable.less | 34 |
2 files changed, 39 insertions, 12 deletions
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js index 2115626642..35b73de875 100644 --- a/plugins/CoreHome/javascripts/dataTable.js +++ b/plugins/CoreHome/javascripts/dataTable.js @@ -111,9 +111,22 @@ $.extend(DataTable.prototype, UIControl.prototype, { this.isEmpty = $('.pk-emptyDataTable', domElem).length > 0; this.bindEventsAndApplyStyle(domElem); this._init(domElem); + this.enableStickHead(domElem); this.initialized = true; + }, + enableStickHead: function (domElem) { + // Bind to the resize event of the window object + $(window).on('resize', function () { + var tableScrollerWidth = $(domElem).find('.dataTableScroller').width(); + var tableWidth = $(domElem).find('table').width(); + if (tableScrollerWidth < tableWidth) { + $('.dataTableScroller').css('overflow-x', 'scroll'); + } + // Invoke the resize event immediately + }).resize(); + }, //function triggered when user click on column sort onClickSort: function (domElem) { var self = this; @@ -1627,10 +1640,12 @@ $.extend(DataTable.prototype, UIControl.prototype, { top: 0 }); + $(".dataTable thead").addClass('with-z-index'); tooltip.stop(true, true).fadeIn(250); }, function () { - $(this).prev().stop(true, true).fadeOut(400); + $(this).prev().stop(true, true).fadeOut(250); + $(".dataTable thead").removeClass('with-z-index'); }); }); }, diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less index 96423295a1..d90e2383d5 100644 --- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less +++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less @@ -22,6 +22,17 @@ vertical-align: text-bottom; } + thead { + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 10; + + &.with-z-index { + z-index: 150; + } + } + td.highlight > .ratio { visibility: visible; } @@ -187,7 +198,7 @@ table.dataTable tr td.cellSubDataTable { } .cellSubDataTable > .dataTable { - padding: 6px 0 0; + padding: 6px 0 0; } /* A link in a column in the DataTable */ @@ -398,8 +409,8 @@ table.dataTable img { } .tableIconsGroup > span > span { - position:relative; - float:left; + position:relative; + float:left; } .dataTableFooterActiveItem { @@ -553,7 +564,7 @@ table.dataTable span.cell-tooltip { } td.cellSubDataTable .loadingPiwik { - padding:0; + padding:0; } .dataTable .searchReset { @@ -617,10 +628,10 @@ td.cellSubDataTable .loadingPiwik { } .periodName { - padding-left:8px; - padding-right:8px; - font-size:16px; - text-transform:capitalize; + padding-left:8px; + padding-right:8px; + font-size:16px; + text-transform:capitalize; } } @@ -630,9 +641,10 @@ td.cellSubDataTable .loadingPiwik { padding-left:8px; } } - -div.dataTableScroller { - overflow-x: scroll; +.widgetContent { + div.dataTableScroller { + overflow-x: scroll; + } } .theWidgetContent .card .card-content, table.dataTable { |