Removing spaces in the Datatables pagination buttons: A step-by-step guide

Seeking assistance in removing spaces in the pagination buttons of datatables. Can you please help me achieve this?

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

I have tried following the instructions from the URLs below:

DATA TABLES BOOTSTRAP 4 EXAMPLE

Despite adding the .js and CSS files as directed in the above links, the issue persists.

Datatables pagination buttons - Remove unwanted space

Unfortunately, none of the solutions provided seem to be working. In need of help to override the current functionality. Thank you.

Below is the code I've been working on:

HTML

  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
  <script src="javascript/third_party/popper.min.js"></script>
  <script src="javascript/third_party/bootstrap.min.js"></script>


  <!-- DATA TABLES -->
  <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
  <script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

CSS

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding : 0px;
  margin-left: 0px;
  display: inline;
  border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border: 0px;
}

Jquery

$.fn.dataTable.moment('MM/DD/YYYY');
  $(`#${ID}`).DataTable({
    columnDefs: [{
      targets: [0, 1, 2, 5, 6, 7],
      orderable: false
    }],
    "order": [[4, "asc"]]
  });

Answer №1

After conducting extensive research, I have discovered that

when utilizing bootstrap css, it is advised not to combine it with jquery.dataTables.css as it may result in pagination spacing issues.

Bootstrap Datatable 4 functions effectively on its own, as demonstrated in a JsBin that I have created.

Please ensure the correct URL for poper.js as follows: otherwise, it may conflict with the bootstrap 4 css.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

EDIT :
If you observe the codepen below, you will encounter a similar issue to what you are experiencing.

If you access that codepen and eliminate the specified line, you should notice improved performance.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10-dev/css/jquery.dataTables.css">

Feel free to try this solution. If it does not resolve the issue, please leave a comment below.

Answer №2

It was noted by Yash that the presence of 'jquery.dataTables.css' leads to the appearance of this bug.

However, if you are utilizing the 'select' feature of DataTables, removing this .css file will result in the loss of visual elements.

Therefore, the decision to remove the .css file depends on whether or not you are using 'select'; if you are, you will need to adjust the css styling for selected items. Alternatively, you can retain the .css file and override the css to ensure that the pagination remains clean. The following CSS eliminates unnecessary spacing around pagination.

.dataTables_paginate ul li {
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
}

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

Tips for stopping an image from stretching the cell in flexbox using CSS

When using Flexbox to style elements, the width of the parent should be determined by the text inside child1. The image inside child2 should grow proportionately as the parent grows. However, it is important to ensure that the parent div does not exceed it ...

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

What is preventing Ellipsis from functioning properly on Internet Explorer 11?

Can anyone help me figure out how to display a single line of text with three dots (...) if it exceeds the width of the container? I've tried using the CSS code below, which works on Mozilla and Chrome, but for some reason, it's not working on I ...

The webpage failed to show the hamburger menu

I'm trying to create a hamburger menu and have written the following code: <header class="header"> <nav class="flex flex-jc-sb flex-ai-c"> <a href="/" class="header__logo"> <img src="im ...

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

Create custom styles for Android applications using CSS or themes programmatically

As I work on developing an application, I am interested in implementing a unique approach... To retrieve a CSS file from the server and apply it to the activity layout. To create a string file for styling or theming and integrating it into the layout. I ...

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...

What could be causing the uneven alignment and padding of texts in my input box and select box in Bootstrap 5?

I'm facing a challenge that has me stumped. I have a form with a text input and a select drop-down, all styled using Bootstrap 5. My goal is to reduce the default left padding on these form controls by adding padding-left:0.3rem to my style definition ...

Ensure that the height of the flex body is set to 100% within the ReactNative View

Within my React Native app, I have constructed the following view: <ScrollView style={{ width: 250, height: '100%', backgroundColor: '#000000' }}> <SafeAreaView style={{ flex: 1, flexW ...

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

Positioning Elements at the Bottom with Bootstrap 5

Here are the codes you requested: <div class="d-flex"> <h1>Hello World</h1> <p class="ms-auto small">Stupid Text</p> </div> <hr class="my-0"> I am attempting to vertically ali ...

The CSS stylesheets are not compatible with IE7 and IE8

I am encountering an issue with my local site where the CSS links are not being included in the page, particularly in IE7 and IE8. The technologies I am using include WordPress 3.6, Bootstrap 3, Modernizr, and jQuery. Source Code <!DOCTYPE HTML PUBLI ...

Generating dynamic divs in parallel

Despite encountering numerous posts related to the issue at hand, none of them have solved my specific problem. I am aiming for 3 divs to display in each row, but the current code is causing each div to show up on a new line vertically: JQuery ...

The multi-item carousel slider in Bootstrap 4.0.0 pen is experiencing issues when integrated with Bootstrap 4.5.3

After searching extensively, I finally stumbled upon a multi-item carousel compatible with bootstrap 4 that meets all my requirements: It is completely responsive (displaying only one item on smaller screens) It features animations <div class="co ...

Having difficulty retrieving the value of the final <th> element within a table or list

I am encountering an issue where I cannot retrieve the value of the last item and update the next item accordingly. I have attempted using :last-child, but it does not provide the desired values. if ($("tbody").children().length == 0) { var ...

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Looking to center the text div within a Bootstrap 5 carousel both vertically on large screens and small (mobile) screens. To view the site, visit... Below is the HTML for the div. The targeted div has the CSS class #hero .carousel-container { display ...

The addition of 1.5rem with Bootstrap 5's bs-gutter-x causes elements and regulations to extend beyond their intended boundaries

I have identified the code causing the issue: --bs-gutter-x: 1.5rem; from _grid_scss:6 is causing problems. Trying to override bs-gutter-x: 0rem; does not resolve the issue. Many others seem to be facing the same problem, but a suitable solution remains el ...

Issue with Jquery not updating the background-size attribute

Having just started out, I'm having trouble understanding why my code won't properly execute the following: var h = $( window ).height(); $('.bg').css({ 'height' : h, 'background-size' : "auto" + h }) Sp ...

What are the best techniques for resizing a Text Field with media queries?

The contact form is responsive and functioning correctly for the textarea field, but there are issues with the input type=text fields on smaller screens. I attempted to address this by incorporating media queries. Below is my code: <!doctype html> ...