The header of the data table does not adapt well to different screen

I am currently experiencing an issue with my Angular data table. Everything works fine until I add the option parameter "scrollY: '200px'" or "scrollY: '50vh'", which causes a bug in my table header. It becomes unresponsive, and the sizing only changes when I click on the header.

Upon resizing my window, the table content becomes responsive but the header sizing remains static:

See header bug here

However, clicking on the header fixes the sizing and aligns it with the rest of the table:

Header after click

My setup consists of using angular-datatables and Bootstrap 5.2, with the following options:

this.dtOptions = {
      pagingType: 'full_numbers',
      paging: false,
      processing: true,
      dom: "lfrti",
      scrollY: '200px',
      responsive: true,
      scrollCollapse: true,
      language:{
        search: "Suche"
      },
    };

Below is the HTML code snippet:

 <div class="card-body m-2">
      <table class="table table-bordered table-striped table-hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
        <thead>
        <tr>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let user of users">
          <td>{{ user.name}}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role.name}}</td>
          <td>{{ user.lastLogin }}</td>
          <td>{{ user.permanent }}</td>
        </tr>
        </tbody>
      </table>
    </div>

Answer №1

This styling addition completely resolved the issue for me:

.dataTables_scrollHeadInner, .table{
  width:100%!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

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

Passing parent HTML attributes to child components in Angular 2

Is there a way to pass HTML attributes directly from parent to child without creating variables in the parent's .ts class first? In the sample code below, I am trying to pass the "type=number" attribute from the parent to the app-field-label component ...

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

Encountering issues with the enhanced Angular 16 application

Recently, I encountered an issue while upgrading my Angular 10 application to use Angular 16. Following the Angular Update Guide, I smoothly transitioned through the versions until reaching Angular 16. However, when running the "ng version" command in Visu ...

Troubleshooting Angular 8 Child Routes malfunctioning within a component

I've encountered a peculiar issue – I've cloned ngx-admin and am attempting to utilize the theme as a base theme. I've crafted Layout Components with Modules featuring enabled Routing. The routes function without any hitches when accessed ...

What is preventing me from accessing the php page using the AJAX request?

I am encountering an issue with my HTML and PHP code. I am successfully able to receive the mail.value in txt, but facing a problem during the AJAX call as it doesn't even go into the error function. I need assistance in identifying and rectifying th ...

Converting "Observable<any>" to "any[]" in TypeScript: A beginner's guide

Within my Angular application, I am retrieving data from a database using a web API in JSON format. The data is fetched using the following method within my xx-service.ts: //... getMyItem(): Observable<any> { return this.http.get('/api/ ...

Confirm before closing the window

How can I get this code to function properly and show a confirmation alert after the user clicks on a button? This is essentially an "exit website button". The confirmation pop-up will have: If "OK" is clicked > the current window will close; If ...

SVG utilizes a distinct color for every individual path

I have an SVG file containing two different paths. <path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44 ...

Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not ...

Tips for aligning an image on top of another image

Here is the code I am working with (also pasted below). My goal is to create a layout with two columns, where the first column features two images and the second column displays some text. In the first column, I specifically want the first image to have a ...

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

I would like to be able to change the background image of a <div> when hovering over a link. Initially, the <div> should not have a background image when the page loads for the first time. This is my current setup: <div class="background"& ...

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

Issue with Angular 7: "Unspecified name attribute causing control not found"

As I delve into the creation of my initial Angular application, I find myself faced with a series of errors appearing in the development mode console: ERROR Error: "Cannot find control with unspecified name attribute" ERROR Error: "Cannot f ...

Disable mandatory checkbox with jQuery validator extension

Check out this test form I created here: Here is the code for the checkboxes: <div class="optIn"> <div id="line1"> <div class="checkbox"><input type="checkbox" checked="checked" value="true" name="MailingListOptIn"> ...

Design a fresh color palette for the dark-light mode feature in Bootstrap using SASS

I am looking to create a dark mode for a website that uses Bootstrap. To achieve this, I need to add a new root class that includes all Bootstrap colors. Below is my colors.scss: $primary:#065FC6; $secondary:#263C5C; $success:#49C96D; $danger:#FD7972; $war ...

Having difficulty grasping the significance of the data received from the API response

Currently, as I am working on my personal Portfolio for a Web Developer course, I have encountered an issue with correctly implementing my API to retrieve information from the database. Previously, I faced no problem when using a .json file, but now, I am ...

There is excessive space beneath the text

I am struggling with aligning text vertically to match the chevrons. I have attempted various CSS properties like removing paddings/margins, setting line-height to 1, using text-decoration: none, text-align: center, and vertical-align: middle on my <p&g ...

I am unable to determine the origin or background of my sidebar

I am having an issue with styling a sidebar using HTML and CSS. The problem I am facing is with setting the background-color property. Despite my efforts to customize the style, the background remains transparent and shows the color of the page beneath it. ...

Removing the @Input decorator in Angular's codebase

I am currently working on an Angular project for a class, and I'm facing an issue where removing the @Input decorator from my component is causing the entire application to not load properly. import { Component, OnInit, Input } from '@angular/ ...