Footer misalignment when scrolling table

[amiart]

Bootstraptable version(s) affected

1.23.5

Description

Found 2 problems with footer position when scrolling table on Bootstrap 3.

1. When moving horizontal scroll to end:

2. When moving horizontal scroll to half and calling resetView():

Example(s)

<style>
.bootstrap-table .fixed-table-header {
    background-color: yellow;
}
.bootstrap-table .fixed-table-footer {
    background-color: yellow;
}
</style>

<button id="button" style="margin: 10px 0px">ResetView</button>

<div style="width: 500px;">
  <table id="table" data-striped="true" data-show-footer="true" data-height="260">
  </table>
</div>

<script>
  var $table = $('#table');
  var $button = $('#button');
  
  function footerFormatter(data) {
    return 'Footer ' + (this.field+1);
  }

  $(function() {
    $table.bootstrapTable({
      columns: [
        {
          field: 0,
          title: 'Header No.1',
          footerFormatter: footerFormatter
        }, {
          field: 1,
          title: 'Header No.2',
          footerFormatter: footerFormatter
        }, {
          field: 2,
          title: 'Header No.3',
          footerFormatter: footerFormatter
        }, {
          field: 3,
          title: 'Header No.4',
          footerFormatter: footerFormatter
        }, {
          field: 4,
          title: 'Header No.5',
          footerFormatter: footerFormatter
        }, {
          field: 5,
          title: 'Header No.6',
          footerFormatter: footerFormatter
        }, {
          field: 6,
          title: 'Header No.7',
          footerFormatter: footerFormatter
        }, {
          field: 7,
          title: 'Header No.8',
          footerFormatter: footerFormatter
        }
      ],
      data: [
        [10, 20, 30, 40, 50, 60, 70, 80],
        [100, 200, 300, 400, 500, 600, 700, 800],
        [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000],
      ]
    })
  
    $button.click(function() {
      $table.bootstrapTable('resetView');
    });
  })
</script>

Possible Solutions

To fix the second problem, add these lines at the end of horizontalScroll() function:

// Synchronize footer position with table body
if (this.options.showFooter && !this.options.cardView) {
    this.$tableFooter.scrollLeft(this.$tableBody.scrollLeft());
}

Additional Context

Windows 10
Chrome 130
Bootstrap 3

[wenzhixin]

This is a bug that only exists in Bootstrap 3. Since Bootstrap 3 is no longer being maintained, it is recommended to upgrade to Bootstrap 5. For Bootstrap 3, here is a temporary solution.

bootstrap-table-bootstrap3.js

const _resetView = BootstrapTable.prototype.resetView

BootstrapTable.prototype.resetView = function (params) {
  _resetView.apply(this, [params])
  setTimeout(() => {
    // only bootstrap3
    this.$tableBody.trigger('scroll')
  }, 100)
}

Working example: https://live.bootstrap-table.com/code/wenzhixin/18308

[objecttothis]

This is a bug that only exists in Bootstrap 3. Since Bootstrap 3 is no longer being maintained, it is recommended to upgrade to Bootstrap 5. For Bootstrap 3, here is a temporary solution.

bootstrap-table-bootstrap3.js

const _resetView = BootstrapTable.prototype.resetView

BootstrapTable.prototype.resetView = function (params) {
  _resetView.apply(this, [params])
  setTimeout(() => {
    // only bootstrap3
    this.$tableBody.trigger('scroll')
  }, 100)
}

Working example: https://live.bootstrap-table.com/code/wenzhixin/18308

@wenzhixin I don't think this is correct. You can see from screenshots I've posted on #7090 that the issue also exists on your demo site which, I assume, is using bootstrap 5.