Bootstrap-table: Fixed columns not working properly when there's nothing to scroll

[vinnesc]

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]

Just noticed this will probably have to with #4534

[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.

[UtechtDustin]

@vinnesc
Thank you for the information!

Any news for that ?
What do you changed (could you submit a PR) ?
If your fix dont work, could you please create a example using our Editor?

[vinnesc]

@UtechtDustin
I managed to fix it using the CSS rule clip but since it's deprecated I didn't think it was a good idea to submit a PR. If anyone knows how to do the same thing using clip-path instead of clip, I could share my changes. I saw how clip and clip-path were fundamentally different and decided to not invest more time into figuring out the solution.

[UtechtDustin]

Would be nice if you could share your changes (no PR necessary), so we have a idea which css rules are affected :-)

[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.

[morojosa]

Try this:

this.$fixedBody.css({
    top: 0,
    width: '100%',
    height: this.$tableHeader.outerHeight(true) + this.$tableBody.outerHeight(true),
    'clip-path': 'inset(0px ' + (this.$tableBody[0].offsetWidth - this.getFixedColumnsWidth()) + 'px 0 0)'
})

[morojosa]

Change too line 38 for problem using data-height:

this.$fixedBody.css({
      top: this.$tableHeader.outerHeight(true),
      width: '100%',
      height: this.$tableBody.outerHeight(true) - 1,
      'clip-path': 'inset(0px ' + (this.$tableBody[0].offsetWidth - width) + 'px 0 0)'
})

[morojosa]

When use clip-path in ipad not work properly