Using bootstrap-vue sticky columns without specifying a column variant is easier than you think

Let's cut to the chase with an example I created using bootstrap-vue's documentation to help clarify the issue:

<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
 >
      <!-- Using utility class `text-nowrap` for horizontal scrolling illustration -->
      <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: [
          /* MODIFIED LINE */
          { key: 'id', stickyColumn: true, variant: 'none'},
          'a',
          'b',
          'c',
          'd',
          'e',
          'f',
          'g',
          'h',
          'i',
          'j',
          'k',
          'l'
        ],
        items: [
          // sample data entries here
        ]
      }
    }
  }
</script>

I have extracted this information from the bootstrap-vue documentation here, making a few alterations. I adjusted the head-variant to "dark" and included stripes in the table structure. When it comes to the sticky column feature, here are three attempts:
1.

{ key: 'id', stickyColumn: true, variant: 'none'} // note 'none' is not truly a variant

2.

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

3.

{ key: 'id', stickyColumn: true}

Issues encountered with each variation:
1. Sticky column appears transparent, leading to columns overlapping unattractively
2. Desire to retain striped pattern without resorting to a monotone background
3. Oddly, the header-variant of the column reverts to the default setting

Objective:
Seeking a solution that keeps the dark-header aesthetic while employing the styling of option 3.

Your assistance is greatly appreciated.

Answer №1

I encountered a similar issue and was able to resolve it by overriding the following CSS classes:

  td.b-table-sticky-column {
    background-color: inherit;
  }

  .table-striped tbody tr:nth-of-type(odd) {
      background-color: #f0f0f1!important; /* ~ RGBA(0,0,0,.5) on RGB */
  }
  
  .table-striped tbody tr{
    background-color: #ffffff!important;
  }

This allowed the column's background color to match the striped row.

Instead of table-light, I suggest using the appropriate table class for your specific setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with PHP Form Email DeliveryIt seems that there is a

I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...

What is causing the auto-fill property in CSS Grid to malfunction when used in a vertical column direction?

I've been experimenting with the auto-fill property in grid rows, but it's not quite working as I intended. My goal is to create rows with a height of minmax(140px, 200px), however, what I'm actually getting is one row at 200px height and th ...

Vue components not being highlighted within template section of Visual Studio Code

I previously had all my imported components within the displayed in a special color compared to other traditional HTML components. However, this feature no longer seems to be functioning. I have already attempted uninstalling and reinstalling all extensi ...

Evaluate One Input Value to Determine Another Input Value

Hey there, I've made an update to the fiddle but let me clarify what I'm trying to achieve. My goal is not to implement form validation as I already have that covered with the HTML5 "required" attribute. What I'm aiming for is to customize t ...

The function str.split() is dividing the text based on individual letters rather than the specified delimiter

I am facing an issue where the string of tags retrieved from firebase needs to be split by ',' and stored in the data() for rendering. The firebase snapshot data is correctly formatted after splitting when viewed in the console like this: "t ...

Leveraging Vue.js to preload data with client-side rendering

When it comes to server-side rendering in Vue, like with Nuxt, the process involves grabbing data using the serverPrefetch() function and rendering content on the server side. This allows for the request to return data to the user only after the initial do ...

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

Iterating over selected checkboxes and setting custom styles in SCSS

As a beginner in SCSS, I am uncertain if it is possible to create a loop function that would compile the following code: I aim to apply certain CSS properties to specific elements when a particular input button is checked. My goal is to achieve this using ...

Value binding with conditional rendering in VueJS 2

My goal is to utilize VueJS 2 to render an inline condition while simultaneously adding a value to a DOM element. I am aware that I can use v-if to control the visibility of elements based on conditions, but how can I achieve an inline condition? For exam ...

Effortless column organization with Bootstrap

My goal is to simplify my column arrangement based on a boolean value. If the value is false <div class="row"> <div class="col-4">A</div> <div class="col-4">B</div> ...

Storybook is pulling fonts from an incorrect location on the server

Regrettably, I am facing an issue where the fonts do not load when accessing a page with Quasar integration. In the Developer Tools, it shows a path error like this: http://localhost:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu ...

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

What is the best way to display my icon <div>s side by side instead of on top of each other?

I am facing an issue with the following code: <a href="#"><div class="iconFriends"></div></a> <a href="#"><div class="iconFavorite"></div></a> <a href="#"><div class="iconPM"></div></a&g ...

Exploring the Relationship Between Z-Index and Overflow in a Collapsible Div Featuring Slim Select

Here is my demonstration of embedding a Slim Select dropdown within a collapsible div: CodePen Example <html> <head> <!-- MULTIPLE SELECT DROPDOWNS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ ...

Is a table cell's border considered as part of its content?

A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers: <!DOCTYPE html> <html> <head> <title>Testing table rendering</title> <style> table { ...

Troubleshooting problems with scrolling on JavaScript in Edge, Opera, and Chrome

Currently, I am developing a fun CSGO-inspired box opening feature on my food recipe website that randomly selects recipes for users. However, I have encountered some challenges with the scrolling functionality. It seems to be incompatible with certain bro ...

Retrieving HTML content using scriptJS

Currently utilizing VueJS and encountering an issue after compiling code in production mode. I have one index.html file and several assets that are being uploaded to the cloud. The challenge lies in the fact that the client is not accepting the HTML file ...

Troubleshooting: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue. I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-togg ...

Guide to sharing a global object among multiple Vue.js mini apps within the same page

As we embrace the progressive nature of Vue.js, we are gradually transitioning our online shopping experience into a Vue.js-powered Single Page Application (SPA). One step at a time, we implement Vue.js to render specific components such as the mini-cart ...