Fixed columns not working properly when there's nothing to scroll

Bootstrap-Table version: v1.15.5 Browsers: Chrome and Firefox

I’m using Bootstrap-Table with Bootstrap 4. My html composition is like this:

<div id="content-main">
   <div class="container" id="accordion">
            <div class="row">
                <div class="col-12"><table id="table" class="table order-list table-striped"></table>               
                </div>
            </div>
    </div>
</div>

In JS I initialize the table and I pull data from an API endpoint. I use a responseHandler to insert give that data the form that I need to show in the table. I have this:

$table = $('#table').bootstrapTable({
      method: 'get',
      url: '/api/endpoint/',
      responseHandler: 'responseHandler',
      classes: 'table table-hover',
      theadClasses: 'thead-dark header',
  });

When I process the new columns, I do this: (Note that columns is a global variable in which I define my static structure of columns. Also, I set the responseHandler back because I had to call addColumns from my first responseHandler and that created an infinite loop).

function addColumns(values) {
  var new_column_header = {
    title: 'TEST',
    colspan: values.length
  };

  columns[0].push(new_column_header);
  for (value in values) {
      var new_column_value = {
        title: values[value][0],
        field: 'value_' + values[value][0],
        align: 'center',
      }
    }
    columns[1].push(new_column_value);
  }

  $table.bootstrapTable('refreshOptions', {
    columns: columns,
    fixedColumns: true,
    fixedNumber: 9,
    responseHandler: function (res) {
      return res;
    }
  });
}

Everything works fine. My table has 9 columns that are always there and I fix using the plug-in and then a few columns that I append dynamically. If the current browser size is wide enough so that all the table fits in, I get this weird interaction.

If I make the browser window small enough that I can scroll at least a little bit, everything shows right.

Please note that if I load the page with the window being maximized and then try to make it smaller, it will not work. It will stay like in the first picture.

[vinnesc]

@UtechtDustin Sure. I changed this https://github.com/wenzhixin/bootstrap-table/blob/ab5ebe10cbc5b0716c78091f872d505779484459/src/extensions/fixed-columns/bootstrap-table-fixed-columns.js#L60 to:

this.$fixedBody.css({
      top: 0,
      width: '100%',
      height: this.$tableHeader.outerHeight(true) + this.$tableBody.outerHeight(true)
      clip: 'rect(0px,' + this.getFixedColumnsWidth() + 'px, auto, auto)'
    })

I’m going a little bit by memory but yeah, that’s it. Would be cool if we could test this example with that change https://live.bootstrap-table.com/code/rparnas/399.

[vinnesc]

Update: Might’ve solved it changing the CSS rules that the extension generates for the fixed-columns-body. Will do some more testing through the day and hopefully post a PR.