Guide to customizing the sort arrow colors of b-table in Bootstrap 4 within Nuxt framework

https://i.sstatic.net/axVNu.png

Using nuxt and bootstrap, I've noticed that the default sorting arrows in the table are too dark for my background. Is there a way to change the color of these sorting arrows?

  <b-table
    show-empty
    small
    striped
    hover
    stacked="md"
    :items="rankingList"
    :fields="fields"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    :sort-direction="sortDirection"
  >

package.json

  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "bootstrap-vue": "^2.15.0",
    "chart.js": "^2.9.4",
    "chartjs-plugin-zoom": "^0.7.7",
    "node-sass": "^4.11.0",
    "nuxt": "^2.0.0",
    "sass-loader": "^7.1.0",
    "vue-chartjs": "^3.5.1",
    "vue-template-compiler": "^2.6.11",
    "vue2-transitions": "^0.3.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "vue-cli-plugin-i18n": "^0.5.1"
  }
javascriptcssbootstrap-4nuxt.jsbootstrap-vue

Answer №1

To address this issue (which ideally shouldn't exist since the arrows are white in the dark table variant and should be visible), one solution is to override the bootstrap css.

Bootstrap uses the following 3 css styles for table sorting arrows:

  1. No sorting:

    body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='red' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e")!important; }

  2. Sort (ascending):

    body .table.b-table>tfoot>tr>[aria-sort=ascending], body .table.b-table>thead>tr>th[aria-sort=ascending]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='red' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e")!important; }

  3. Sort (descending):

    body .table.b-table.table-dark>tfoot>tr>[aria-sort=descending], body .table.b-table.table-dark>thead>tr>[aria-sort=descending], body .table.b-table>.thead-dark>tr>[aria-sort=descending]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='red' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e")!important; }

Each of these css styles includes a "background-image" property that points to an svg element.

Within each svg element, there are two "path" elements declared.

Both path elements have a "fill" property which you can modify to select any color of your choice.

In the example above, the fill property is set to "red".

Answer №2

Here is a CSS trick that I found effective for Bootstrap versions 5 and higher.


.bootstrap-table .fixed-table-container .table thead th .both {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIAAwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAToAMABAAAAAEAAAATAAAAADKyfrgAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d...
}

This customization results in arrow color change to green.

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

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs

Tips for utilizing javascript document.createElement, document.body, and $(document) in an HTML web resource for Microsoft CRM code reviews

Let me start off by saying that I am not a regular blogger and I am feeling quite confused. If my question is unclear, please provide guidance for improvement. I recently submitted a Microsoft CRM PlugIn to the Microsoft Code Review. I am new to Javascrip ...

javascriptjqueryhtmldomdynamics-crm-online

Next.js 14 useEffect firing twice upon page load

Having an issue with a client component in next js that is calling an API twice at page load using useEffect. Here's the code for the client component: 'use client'; import { useState, useEffect } from 'react'; import { useInView ...

javascripttypescriptnext.jsreact-hooks

Storing a token in NodeJS using JavaScript

We currently have a mobile single-page application built using HTML/CSS/NodeJS. The functionality of this app requires numerous API calls, all of which require a bearer token for authorization purposes. This bearer token is simply a string value that we ge ...

javascriptnode.js

Unlocking the Power of $http and Stream Fusion

I'm interested in accessing the public stream of App.net. However, when I attempt to retrieve it using a simple $http.get(), I only receive one response. $http .get('https://alpha-api.app.net/stream/0/posts/stream/global') .success(func ...

javascriptangularjs

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

javascripthtmlcss

Updating the jQuery $ function to accommodate outdated codebases

After using stackoverflow as a valuable resource for years, I decided to join. I have a good grasp on JavaScript and noticed some questions that I could provide input on. As I delved into the platform, I realized the prevalence of jQuery. This prompted me ...

javascriptjquery

Steps for including a map in a property file for JavaScript parsing

When a checkbox is clicked, a new series of checkboxes will be displayed. The details for these checkboxes are fetched from a database. However, I now need to have certain checkboxes pre-checked based on the user's selection. Since I can't store ...

javascriptjsp

Running multiple web applications with different base directories on a single Express server

I am currently working on serving a website that requires different static directories for various routes. When a GET request is sent to the /tools* route, I want to utilize the /dist/toolsApp/ directory as the base directory for my frontend code. If ...

javascriptnode.jsexpress

What is the solution for changing image sources dynamically in React-Native?

How can I access image sources from a JSON file without encountering a module error when using JSON objects as the source? JSON FILE: { "Image": {"source": "./SourceFolder/ImageFile.png"} } JS FILE const data = require('./jason.json'); ...

javascriptjsonreact-native

Prevent the float:left property from causing my div to overlap with another div

Is there a way to style "a" so that it can take up space and float to the left simultaneously? <div style="background:#111"> <div id="a" style="float:left; height:30px"></div> </div> ...

htmlcss

How can CKEditor ensure that there is a paragraph tag within a div element?

Working on my current CMS, I have the need to include some custom HTML (which is functioning as expected): var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'>Edit Sidebar Text</div>"); The issue arises when atte ...

javascripthtmlckeditor

Discovering the value of a chosen star and saving it in a database with the help of jQuery or JavaScript

When a user clicks on the 3rd star in the Jrate Plugin, I need to retrieve the value of 3. This can be achieved using the jRate onSet option. Below is my HTML: <div id="jRate"></div> And this is my JavaScript code: $("#jRate").jRate({ ...

javascriptjqueryjquery-plugins

A webpage styled with w3.css featuring text without any underline

I am currently using w3.css but I'm facing an issue where some of my hyperlinks have underlines while others do not. My goal is to remove all underlines from the hyperlinks in the content below: <ul class="w3-ul w3-white"> <a class="" href=" ...

htmlcssw3.css

In JavaScript or jQuery, what is the most optimal method to swap out all instances of a specific string within the body content without altering the rest of the body text?

Is there a way to replace specific occurrences of a string within a web page's body without disrupting other elements such as event listeners? If so, what is the best method to achieve this? For example: Consider the following code snippet: <body ...

javascripthtmljqueryreplacesubstring

The require() function is not functioning properly, even after I tried switching the type from module to common. As a newcomer to this, there may be something essential that I

Despite changing the type from module to common, I am still unable to get require() to work. As a newcomer to this, there may be something I'm overlooking that I can't quite pinpoint. I attempted const express = require('express'); but ...

javascriptnode.jsexpress

Tips for utilizing the Spacing Utility Classes in Bootstrap

While browsing through an article, I came across Bootstrap 4 Spacing Utility Classes, particularly the m-b-lg class used in the className section. <div class="row"> <div class="col-sm-6 m-b-lg"> <!-- column-small-50%, margin-bot ...

javascriptcssmeteorbootstrap-4

Is it possible to create a button that can bring in a .css file?

Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes? This is the CSS file I have: .body { background-image: url("example.png"); } ...

javascriptjqueryhtmlcssbutton

Determining the length and angle of a shadow using X and Y coordinates

I'm currently tackling the task of extracting data from a file generated by a software program that has the ability to add a shadow effect to text. The user interface allows you to specify an angle, length, and radius for this shadow. https://i.stack ...

javascripttypescriptmathcalculationangle

When attempting to import Three.js canvas on Github Pages, a 404 error is received

While attempting to host my webpage with a three.js background, I encountered an issue where everything loads properly when hosted locally, but nothing loads when pushed to GitHub pages - only the HTML is visible. I am utilizing Vite to package my code an ...

javascriptthree.jsgithub-pagesreact-three-fiber