What is the best way to customize the default button style for buttons in Angular Datables?

After integrating buttons into my Angular Datatables, I noticed that they have default styling, which makes them stand out from the rest of my web page (refer to the Column Visibility button in the screenshot below):

I attempted to use CSS to make the buttons look like the Bootstrap buttons used elsewhere on the page, but my efforts were unsuccessful. Adding my CSS values to 

button.dt-button, div.dt-button, a.dt-button {}
required using !important for every style override, which didn't feel like the right approach.

Additionally, including 

bower_components/datatables/media/css/buttons.bootstrap.css
in my page's <links> section did not produce the desired outcome either.

Is there a straightforward method to achieve this customization?

cssangularjstwitter-bootstrapdatatablesangular-datatables

Answer №1

Previously, I used to eliminate any mention of the dt-button in my code. This particular element seemed to be causing all sorts of issues. It appears that dataTables introduced the dt-button as a way to style various tags into a uniform button look, which clashed with bootstrap. To ensure that the dataTables buttons matched the rest of the Bootstrap 3 layout, I decided to add bootstrap classes to the className:

.withButtons([ 
   { extend: 'pdf', 
     className: 'btn btn-sm btn-primary' 
   }  
])

I also made sure to remove any references to dt-button in the initComplete section:

.withOption('initComplete', function() {
  $('.dt-button').removeClass('dt-button')
})

This approach guarantees that the buttons appear exactly as intended in pure Bootstrap styling without any additional modifications. While I acknowledge that this may not be the most conventional method, as there should ideally exist a seamless integration between withBootstrap() and withButtons(), I personally have not found a successful combination despite utilizing different package versions obtained through CLI rather than manual configurations.

datatables.net
datatables.net-bs
datatables.net-buttons
angular-datatables

In my opinion, the .net packages are somewhat overshadowed by options such as dataTables download builder, CDN, and GitHub. They do not seem to be completely aligned in terms of functionality.

Answer №2

To make the necessary adjustments in my case, I included:

display: inline;

In the CSS of the elements on the left that are floating above. In my situation (using jQuery / Rails / Bootstrap), I was adding Buttons and facing issues with the Bootstrap theme affecting its appearance.

You can also customize the default CSS classes on the elements for better results:

https://datatables.net/reference/option/buttons.dom

For example, in CoffeeScript notation:

$ ->

  locations = $('#locations').dataTable
    dom: 'Bfrtip'
    ajax: 
      url: $('#locations').data('source')
      type: 'GET'
    order: [[ 3, 'desc' ], [ 2, 'desc' ]]
    processing: true
    serverSide: false
    responsive: false
    buttons:
      dom:
        container:
          className: 'btn-group'
        button:
          className: 'btn btn-primary btn-outline'

This modification removes the dt-buttons and dt-button classes, allowing the base Bootstrap CSS to function correctly.

<div class="btn-group">
  <a class="btn btn-primary btn-outline buttons-copy buttons-html5" tabindex="0" aria-controls="locations" href="#">
    <span>Copy</span></a>
  <a class="btn btn-primary btn-outline buttons-pdf buttons-html5" tabindex="0" aria-controls="locations" href="#">
    <span>PDF</span></a>
</div>

As a result, the Bootstrap buttons display as intended.

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

Styling a webpage with a two-row layout using just CSS

I am looking to design a 2-row layout for a webpage where one row will contain filters and the other row will display results. The layout should meet the following criteria: The page height should not exceed 100% The first row's height will vary bas ...

htmlcss

What is the solution to making flexbox align-items flex-end work in WebKit/Blink?

I'm attempting to embed one flexbox within another flexbox. The outer box is aligned vertically: +------+ | | +------+ | | | | | | +------+ The top section adjusts to fit the content with flex 0 1 auto, while the bottom half occu ...

cssflexbox

When using Material UI GridTile, the actionIcon will not be shown if there is no title present

In my React application, I am utilizing Material-UI GridList to showcase some images. I am interested in adding an IconButton on top of the image in my GridTile component. Currently, I can achieve this by providing the button to the actionIcon prop. Howeve ...

cssreactjsoverlaymaterial-ui

The onInvoke hook in Zone.js is receiving an inaccurate currentZone value

Greetings. In the comments for the ZoneSpec interface (found in zone.ts file), it states that the onInvoke hook must receive currentZone as the second parameter. If creating an interceptor zone, the reference to that zone should be passed as the second pa ...

javascriptangularjszone.js

The Angular function resolved the promise before the HTTP API request finished executing

I am a beginner in AngularJs and I'm facing an issue with a validate function that returns a promise. This function makes an internal http get api call to receive a response in the form of a promise. The problem arises because the validation code need ...

angularjs

Validating Angular forms outside the <form> element

I have a rather unusual question - is it possible to retrieve the form status from outside the block? For example: <form name="form"> <input type="text" name="name" required /> </form> <button ng-disabled="form.$invalid"></b ...

angularjsangular-forms

Unable to set DIV to 'inline-block' or none based on checkbox selection

Despite reviewing multiple examples, I am still struggling to make this DIV visible and hidden by clicking a checkbox. Can someone please review my JavaScript code? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten ...

javascriptcsshtml

Starting the module after Angular has bootstrapped

My current challenge involves loading and injecting a module after the app has been bootstrapped. Initially, my module looks like this: angular.module('mainApp', []); However, I later realized that I need to provide all routes available in seco ...

angularjslazy-loadingangularjs-moduleangularjs-injector

Strategies for optimizing polling of mySQL database using $http.get

** ANGULAR 1.X ** Hey there! I'm currently seeking assistance in making this $http.get function asynchronous. Currently, my workaround involves using a setInterval on the displayData scope. However, this solution is not efficient as it consumes a lot ...

phpmysqlangularjsangularjs-http

Tips for showing more rows by clicking an icon within an Angular 2 table

When I click on the plus (+) button in the first column of each row, only one row expands. How can I modify it to expand multiple rows at a time? Thanks in advance. <div> <table class="table table-striped table-bordered"> <thead> ...

javascripthtmlcssangularbootstrap-4

The skipping of crucial text in tab focus is adversely affecting the accessibility of the website

My appbar contains an image link, a warning indicating the user's current environment, and details about the logged-in user. While testing accessibility with a screen reader, I noticed that tab focus skips over the user details in favor of a link in ...

cssmaterial-uiaccessibilityfocusscreen-readers

Is it possible to hide a fixed header on scroll in a mobile device?

I am facing an issue with my Wordpress site where I want the header to hide when the user scrolls. Despite trying various codes, I have been unable to make it work. The reason for wanting to hide the header is that on mobile devices, it causes scroll prob ...

javascriptcsswordpressjquery-mobile

Empty gaps separating two divs nested within another div within a div (unable to function)

I'm diving into the world of HTML, CSS, and JS as I embark on creating a weather application. My vision is to include the temperature, followed by the city and its corresponding weather (accompanied by an icon), and lastly additional details like humi ...

htmlcssflexbox

Discovering whether the incoming request to an AngularJS application is a GET or POST request can be efficiently accomplished

I recently started learning angularjs and I successfully built an application using the angular seed skeleton https://github.com/angular/angular-seed for the client side. For my API server, I utilized expressjs server. The URL of my home page is localhost ...

javascriptangularjsnode.js

How can you enable the sortable feature with a mousedown event instead of a drag event by utilizing Jquery UI Sortable?

I have implemented the Jquery UI Sortable plugin to enable re-ordering of table rows. Currently, the drag and drop functionality is working well, but I would like to trigger the sortable feature using a mousedown event instead of a drag event. You can vi ...

jqueryangularjsjquery-uijquery-ui-sortable

I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Due to the readability issues of the navigation color against a specific image, I am looking to modify it for a particular page. Below is the HTML code: <div id='nav'> <ul> <li id='navBiog'> ...

jquerycsspseudo-class

Creating synchronous code that includes a promise involves structuring your code in a way

Here is a function that I am currently working with: var send = function send (report) { someAsnycFn().then( function () { synchronousSend(report); return true; }, function () { ...

angularjspromiseq

Custom sample rate options in RecordRTC allow for the recording of silent audio tracks

I am currently working on implementing RecordRTC.js to capture audio from a microphone and then upload it to a server built with nancyfx. Initially, I am simply aiming to upload the audio stream and store it in a wav file for testing purposes. However, my ...

javascriptangularjswebrtcgetusermedia

Leveraging AngularJS ng-model for bidirectional data binding to display the name of a Stripe plan based on its plan

On the final page of a checkout process labeled "Review & Checkout," I am showcasing form inputs. Here, I display the selected plan and the customer's personal information entered so far. While displaying fields such as Name or Email is straightf ...

angularjslaravelstripe-payments

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap