What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table:

Current HTML code: 

<div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-bordered">
                                    <thead class="thead-colored thead-primary">
                                        <tr class="text-center">
                                            <th>ID</th>
                                            <th>NICKNAME</th>
                                            <th>EMAIL</th>
                                            <th>REGISTRATION</th>
                                            <th>STATUS</th>
                                            <th>HIGH</th>
                                            <th>ACTIONS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let user of usersArray" class="text-center">
                                            <td>{{user.ID}}</td>
                                            <td>{{user.NICKNAME}}</td>
                                            <td>{{user.EMAIL}}</td>
                                            <td>{{user.REGISTRATION | date: 'dd-MMMM-yyyy' | uppercase}}</td>
                                            <td>
                                                <span class="bg-success pd-y-3 pd-x-10 text-white tx-11 tx-roboto">
                                                            {{user.STATUS | toStatusReadable}}
                                                        </span>
                                            </td>
                                            <td>{{user.ACCESS_PROVIDER}}</td>
                                            <td>
                                                <div type="button" class="dropdown">
                                                    <a [routerLink]="" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
                                                        <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
                                                            <span class="mg-r-10 tx-13 tx-medium">Options</span>
                                                            <img src="https://via.placeholder.com/500" class="wd-25 rounded-circle" alt="">
                                                            <i class="fas fa-angle-down"></i>
                                                        </div>
                                                    </a>
                                                    <div class="dropdown-menu pd-10 wd-200">
                                                        <nav class="nav nav-style-2 flex-column">
                                                            <a [routerLink]="" class="nav-link"><i class="icon fas fa-edit"></i> Edit data</a>
                                                        </nav>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

TS File code for the table:

export class AdministratorsComponent implements OnInit, OnDestroy {
  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject<any>();

  usersArray: Array<Users> = [];

  constructor(
    private devInfo: DevelopmentService,
    private dtService: DatatableService,
    private administratorsService: AdministratorsService
  ) {
    this.GetSmartliveUsers();
  }

  ngOnInit() {
    document.getElementById('mainSystemPanel').removeAttribute('class');
    document.getElementById('mainSystemPanel').className = 'br-mainpanel';
    this.dtOptions = this.dtService.getDataTableConfig();
  }

  ngOnDestroy() {
    this.dtTrigger.unsubscribe();
  }

  async GetSmartliveUsers() {
    const users = <any []> await this.administratorsService.getSmartliveUsersList();
    for ( let i = 0; i < users.length; i++) {
      this.usersArray.push(JSON.parse(users[i]));
    }
    this.dtTrigger.next();
  }
}

The service providing the table configuration:

export class DatatableService {

  constructor() {
  }

  getDataTableConfig() {
    return {
      language: {
        url: 'assets/content/smartlive/spanish.json'
      },
      responsive: true
    };
  }
}

angular.json snippet:

"styles": [
                            "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                            "node_modules/animate.css/animate.min.css",
                            "src/assets/content/template/lib/ionicons/css/ionicons.min.css",
                            "src/assets/content/template/lib/rickshaw/rickshaw.min.css",
                            "src/assets/content/template/lib/select2/css/select2.min.css",
                            "src/assets/content/template/css/bracket.css",
                            "src/assets/content/template/css/bracket.oreo.css",
                            "node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
                            "node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css",
                            "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
                            "src/styles.css"
                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.js",
                            "node_modules/datatables.net/js/jquery.dataTables.js",
                            "node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js",
                            "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"
                        ]

I have installed all necessary package files for the datatable, but I am struggling with achieving correct 100% width and the positioning of the pagination and search input over the table.

htmlcssangular7angular-datatables

Answer №1

While it may be overdue, this information could benefit someone else ;-)

Give this a shot:

npm install datatables.net-bs4

After that, make sure to include the following lines in your code:

"styles": [
   ...
   "./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
   ...
],
"scripts": [
   ...
   "./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
   ...
],

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

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

Is there a way to prevent my slider from continuously scrolling? I think it has something to do with the offset parameter but I'm having trouble figuring it out. Any assistance would be greatly appreciated. var $container = $(container); var resizeF ...

javascriptjqueryhtmlcss

Ways to send a list with dictionaries in an HTML template and retrieve their data

Within my Django project, I am dealing with a specific list: my_list=[{'id':1,'username':'sometext'},{'id':2,'username':'someothertext'}] I have passed this list to the template using the followi ...

pythonhtmlpython-3.xdjango

Ensure the form is properly validated before initiating the submission process on 2checkout

Attempting to prevent the form from being submitted, I implemented the code below. Typically, this method works perfectly fine. However, when integrating 2checkout js (), it does not function as intended. <form onSubmit="validate(); return false;" meth ...

javascriptjqueryhtml2checkout

When initializing a new instance of Stripe using cartalyst/stripe-laravel, an error occurs stating "The Stripe API key has not been properly defined!"

I am eager to explore Stripe and learn how to process payments. Currently, I am utilizing the cartalyst/stripe-laravel package to create a new instance of Stripe following the instructions provided here. The code snippet should resemble this: $stripe = ...

phphtmllaravelstripe-payments

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

cssangular

Can footer.html be omitted from the base.html file when extending it for Django?

I'm using base.html as my template which includes {% include 'footer.html' %} in every page. However, there are certain pages where I don't want the footer to appear. Is there a way to exclude the footer on specific pages using some sor ...

htmldjango

Click on the div to automatically insert its text into the textarea

I am looking for a way to enable users to edit their posts easily. My idea is to have them click on a link, which will then hide the original div containing their post and reveal a new div with the old text inside a textarea for editing. Despite searching ...

javascriptjqueryhtml

Incorrect rendering of the <li> tag

I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect ...

javascriptjqueryhtmlcss

Issue with CSS 3 gradient compatibility in Internet Explorer 8

My CSS3 gradient button is working perfectly on all browsers except for IE8. To make it work on IE8, I am utilizing CSS3 Pie. You can see the search button in action by visiting: Upon inspecting my console, I noticed an error on this line: PIE.htc, lin ...

csscss3pie

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...

javascriptjqueryhtmlcssajax

What do the transition props for Material-UI (MUI) entail

Can you provide more information on React MUI transition props besides "transform"? transition: theme.transitions.create(["color", "transform"], { duration: theme.transitions.duration.shortest, }) I have been looking through the MUI documentation but I am ...

cssreactjsmaterial-ui

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

Controlling the scroll behavior of div elements with the CSS overflow-y property

This is the current setup I have: <div> <div> </div> <div> </div> <div> </div> </div> The inner divs are styled with this CSS: float: left; margin-right: 40px; width: 100px; While ...

htmlcssoverflow

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Hey everyone, I'm having a bit of trouble with my modal. It appears correctly when clicked to open, and the close buttons seem to detect that my mouse is hovering over them. However, when I click on the buttons, nothing happens and the modal remains o ...

javascripthtmlbootstrap-4

An adaptive image-based menu design that adjusts based on screen size

Although I can get it to function properly, the trouble arises when I attempt to resize it for responsiveness, resulting in a strange scaling issue. Essentially, I want the images to remain at their natural size and align next to each other seamlessly with ...

htmlcssimageresponsive-design

Ancient queries carry the weight of time

Extremely ancient, very old, incredibly aged beyond belief ...

javascripthtmlnode.jsexpress

Display or conceal nested divs within ng-repeat loop

I set up a div with sub divs to establish a nested grid system. There are three levels altogether: MainDiv - Always Visible SecondDiv - Display or conceal when MainDiv is clicked on ThirdDiv - Display or conceal when SecondDiv is clicked on <div c ...

javascriptcssangularjsionic-framework

Steer clear of retrieving all the elements from the HTML DOM at once

Scenario I am working on a HTML5+CSS+JS slideshow project that needs to be synchronized across 50 clients in a local area network using a single wireless router. Challenge Due to the heavy content, particularly images, of the slides, I intend to dynamic ...

javascripthtmljquery

Unable to implement CSS styling on Bootstrap collapsible menu

When you visit this website and resize the browser window to reveal the toggle buttons, clicking on either one will only expand the dropdowns to a small portion of the screen width. I would like both dropdowns to stretch out and fill 100% of the available ...

jqueryhtmlcsstwitter-bootstrap-3

Mobile Device Experiencing Constant Resizing Issues on Website

I have been working on my website for almost a year now, and I am facing an issue with its responsiveness on mobile devices. Despite using Bootstrap 4 and Ajax to load pages and modals, I can't seem to figure out what's causing the problem. Befor ...

ajaxhtmlcssbootstrap-4