Footer misalignment when scrolling table

[amiart]

Bootstraptable version(s) affected

1.23.5

Description

Footer position is wrong when moving horizontal scroll to the end. Also the vertical scroll should not be visible, because the table height is sufficient to accommodate all the rows.

This is the same issue as #7578, but for Boostrap 5.

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>

Working example: https://live.bootstrap-table.com/code/amiart/18309

Possible Solutions

The problem is that margin-right is set to 0 for $tableFooter in fitFooter() function:

var scrollWidth = this.hasScrollBar && fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight() ? Utils.getScrollBarWidth() : 0;
this.$tableFooter.css('margin-right', scrollWidth)

Additional Context

Windows 10 Firefox 131 Bootstrap 5

[amiart]

The same issue is visible in this example: https://examples.bootstrap-table.com/index.html#issues/639.html

[objecttothis]

#7090

[amiart]

My workaround:

var $table = $('#table').bootstrapTable({...});
fixBootstrapTableHeaderAndFooterPosition($table);

function fixBootstrapTableHeaderAndFooterPosition(table) {
    var tableInstance = table.data('bootstrap.table');
    table.on('reset-view.bs.table', function(ev) {
        if ($(this).is(':visible')) {
            fixHeaderAndFooterPosition();
        }
    });
    table.on('post-header.bs.table', function(ev) {
        if ($(this).is(':visible')) {
            fixHeaderAndFooterPosition();
        }
    });
    
    function fixHeaderAndFooterPosition() {
        var header = table.closest('.bootstrap-table').find('.fixed-table-header');
        var body   = table.closest('.bootstrap-table').find('.fixed-table-body');
        var footer = table.closest('.bootstrap-table').find('.fixed-table-footer');
        var scrollWidth = Math.max(body.innerWidth() - body.prop('clientWidth'), 0);
        if (!tableInstance.options.cardView && tableInstance.options.showHeader && tableInstance.options.height) {
                header.css('margin-right', scrollWidth + 'px').children('table').width(body.children('table').width());
                header.children('table').get(0).style.minWidth = header.children('table').get(0).style.width;  // IE fix
                header.scrollLeft(body.scrollLeft());
        }
        if (!tableInstance.options.cardView && tableInstance.options.showFooter && tableInstance.options.height) {
                footer.css('margin-right', scrollWidth + 'px').children('table').width(body.children('table').width());
                footer.children('table').get(0).style.minWidth = footer.children('table').get(0).style.width;  // IE fix
                footer.scrollLeft(body.scrollLeft());
        }
    }
}