Browse Source

Fix fixed table header for sticky (#5652)

* Fix fixed table header for sticky

* Fix fixed table header connected with horizontal scroll
Ruslan Kutliakhmetov 4 years ago
parent
commit
935aeb46eb
1 changed files with 10 additions and 0 deletions
  1. 10 0
      src/extensions/sticky-header/bootstrap-table-sticky-header.js

+ 10 - 0
src/extensions/sticky-header/bootstrap-table-sticky-header.js

@@ -113,16 +113,26 @@ $.BootstrapTable = class extends $.BootstrapTable {
       // match bootstrap table style
       this.$stickyContainer.show().addClass('fix-sticky fixed-table-container')
       // stick it in position
+      const coords = this.$tableBody[0].getBoundingClientRect()
+      let width = '100%'
       let stickyHeaderOffsetLeft = this.options.stickyHeaderOffsetLeft
       let stickyHeaderOffsetRight = this.options.stickyHeaderOffsetRight
 
+      if (!stickyHeaderOffsetLeft) {
+        stickyHeaderOffsetLeft = coords.left
+      }
+      if (!stickyHeaderOffsetRight) {
+        width = `${coords.width}px`
+      }
       if (this.$el.closest('.bootstrap-table').hasClass('fullscreen')) {
         stickyHeaderOffsetLeft = 0
         stickyHeaderOffsetRight = 0
+        width = '100%'
       }
       this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}px`)
       this.$stickyContainer.css('left', `${stickyHeaderOffsetLeft}px`)
       this.$stickyContainer.css('right', `${stickyHeaderOffsetRight}px`)
+      this.$stickyContainer.css('width', `${width}`)
       // create scrollable container for header
       this.$stickyTable = $('<table/>')
       this.$stickyTable.addClass(this.options.classes)