Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

b-table head-variant lost when using sticky column #5278

Closed
ConorMurphy21 opened this issue Apr 30, 2020 · 2 comments · Fixed by #5279
Closed

b-table head-variant lost when using sticky column #5278

ConorMurphy21 opened this issue Apr 30, 2020 · 2 comments · Fixed by #5279
Labels
Status: Fixed / Implemented Type: Bug
Projects

Comments

@ConorMurphy21
Copy link

@ConorMurphy21 ConorMurphy21 commented Apr 30, 2020

Brief disclaimer, I am not usually a web dev, so this may be easily fixed. But I have looked at the documentation and this seems like a bug to me.

Describe the bug

head-variant for a column with sticky-column set to true is lost if the column does not define variant.

To reproduce the bug

I took this code directly from the documentation of sticky-columns and modified it.

<template>
  <div>
    <div class="mb-2">
      <b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox>
      <b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox>
    </div>
    <b-table
      :sticky-header="stickyHeader"
      :no-border-collapse="noCollapse"
      responsive
      :items="items"
      :fields="fields"
      head-variant="dark"
      striped
 >
      <!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
      <template v-slot:head(id)="scope">
        <div class="text-nowrap">Row ID</div>
      </template>
      <template v-slot:head()="scope">
        <div class="text-nowrap">
          Heading {{ scope.label }}
        </div>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stickyHeader: true,
        noCollapse: false,
        fields: [
          /* THIS IS THE LINE I CHANGE */
          { key: 'id', stickyColumn: true},
          'a',
          'b',
          'c',
          'd',
          'e',
          'f',
          'g',
          'h',
          'i',
          'j',
          'k',
          'l'
        ],
        items: [
          { id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }
        ]
      }
    }
  }
</script>

note that defining variant as 'none' also doesn't work (note that it should but it is different).

{ key: 'id', stickyColumn: true, variant: 'none'}

Expected behavior

I would expect that the head-variant remains "dark", and does not change. setting variant to 'none'
almost worked, but it caused the column to be treated as transparent and stack and overlap.

Versions

  • BootstrapVue: 2.4.0
  • Bootstrap: 4.4.1
  • Vue: 2.6.11

Environment:

  • Device: laptop, phone
  • OS: windows, android
  • Browser: firefox, edge, chrome
  • Version: most recent versions
@ConorMurphy21 ConorMurphy21 changed the title bt-table head-variant lost when using sticky column b-table head-variant lost when using sticky column Apr 30, 2020
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 30, 2020

Interesting... there must be a bug in the variant detection for sticky column cells that are in the <b-thead> (and probably <b-tfoot>as well).

In Bootstrap v4.x we need to do quite a bit of "magic" to get the variants to work correctly when the table has sticky headers/columns, as the colors are applied to the row and not the cells (which is needed when the table can scroll). Bootstrap v5 will be fixing how table color variants are applied (they will apply to the cells instead of the rows or thead/tfoot/tbody)

We'll see what we can do to handle this issue with current Bootstrap v4.

@tmorehouse tmorehouse added Bootstrap v4 Type: Bug and removed Bootstrap v4 labels Apr 30, 2020
@tmorehouse tmorehouse added this to In progress in v2.14.0 Apr 30, 2020
@tmorehouse tmorehouse moved this from In progress to To do in v2.14.0 Apr 30, 2020
v2.14.0 automation moved this from To do to Done Apr 30, 2020
tmorehouse added a commit that referenced this issue Apr 30, 2020
… sticky columns (fixes #5278) (#5279)

Co-authored-by: Jacob Müller
@tmorehouse tmorehouse mentioned this issue Apr 30, 2020
1 task
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented May 6, 2020

@ConorMurphy21 BootstrapVue v2.13.1 has been release which includes a fix for this issue.

@tmorehouse tmorehouse added the Status: Fixed / Implemented label May 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Fixed / Implemented Type: Bug
Projects
No open projects
v2.14.0
  
Done
2 participants