Creating a personalized scroll bar for an Angular Material Table while retaining the original table styles

Is there a way to maintain the table style of an Angular Material table while using a custom scrollbar with a transparent background?

Currently, the issue arises when the scrollbar has an extended width, causing the table style to disappear.

https://i.sstatic.net/n3KvL.jpg

HTML:

<div class="container-list">
    <mat-table mat-table [dataSource]="dataSource" matSort>
        <!-- ... insert basic table definition (like here: https://material.angular.io/components/table/examples#table-basic)  ... -->
    </mat-table>
</div>

CSS (custom scrollbar):

.container-list {
    overflow: auto;
    height: 500px;
}
  
.container-list::-webkit-scrollbar {
    width: 30px;
    height: 8px;
    border-radius: 30px;
    background-color: transparent
}
  
.container-list::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: black;
}
  
.container-list::-webkit-scrollbar-button,
.container-list::-webkit-scrollbar-track,
.container-list::-webkit-scrollbar-track-piece,
.container-list::-webkit-scrollbar-corner,
.container-list::-webkit-resizer {
display: none;
}

.container-list::-webkit-scrollbar-track-piece:start {
    margin-top: 450px;
}

The only solution I've come across is to hide the entire scrollbar, but that is not the desired outcome.

.container-list::-webkit-scrollbar {
    display: none;
}

It is also essential to keep the mat-header-row fixed (the row containing column names) so that it remains visible while scrolling. This can be achieved using sticky.

Answer №1

To ensure your Angular Material table displays correctly, place it inside a container without any customized scrollbar styles:

<div class="container-list"> <mat-table mat-table [dataSource]="dataSource" matSort>
<!-- ... insert basic table definition ... --> </mat-table>

If you want to add a custom scrollbar, create a separate container for it and apply the scrollbar styles there:

<div class="custom-scrollbar-container"> <!-- Add your content here, including the Angular Material table if necessary --> </div>

Adjust the custom scrollbar styles in the .custom-scrollbar-container class:

.custom-scrollbar-container { overflow: auto; height: 500px; }

.custom-scrollbar-container::-webkit-scrollbar {
  width: 30px;
  height: 8px;
  border-radius: 30px;
  background-color: transparent;
}

.custom-scrollbar-container::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: black;
}

.custom-scrollbar-container::-webkit-scrollbar-button,
.custom-scrollbar-container::-webkit-scrollbar-track,
.custom-scrollbar-container::-webkit-scrollbar-track-piece,
.custom-scrollbar-container::-webkit-scrollbar-corner,
.custom-scrollbar-container::-webkit-resizer {
  display: none;
}

.custom-scrollbar-container::-webkit-scrollbar-track-piece:start {
  margin-top: 450px;
}

By containing the custom scrollbar styles within the .custom-scrollbar-container, you can prevent any conflicts with the Angular Material table's styling, ensuring the table maintains a consistent appearance even when using a custom scrollbar with a see-through background.

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

How come my ejs files are all affected by the same stylesheet?

Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implement ...

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

Getting the x-axis points on Google charts to start at the far left point

I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...

Angular-12 ngx-datatable does not recognize the element 'ngx-caption' in Angular

Within my Angular-12 project, I have set up two modules: AppModule and AdminModule. Specifically, I am utilizing the following module for datatable functionality: "@swimlane/ngx-datatable": "^19.0.0", Here is how it is implemented in ...

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

I am currently working on an admin page that involves querying and reporting on the page weights of key pages on a website, such as landing pages. Bootstrap 4 is in the pipeline, and I have utilized it to design a layout that I am satisfied with. However, ...

What is the best way to implement a sub-menu using jQuery?

After successfully implementing a hover effect on my menu item using CSS, I am now struggling to make the sub-menu appear below the menu item upon hovering. Despite my efforts to search for jQuery solutions online, I have not been successful. Are there a ...

angular datatable pagination issue with mdb

I've been following a tutorial at this website: Unfortunately, I keep encountering an error whenever I attempt to use pagination. Cannot read property 'setMaxVisibleItemsNumberTo' of undefined This is how my HTML code looks: <table ...

Concentrating on a Div Element in React

I'm trying to set up an onKeyPress event that will be triggered when a key is pressed while a 'Level' element is displayed. I know that the div needs to be focused for events to register, but I'm not sure how to do this with functional ...

Remove all HTML tags except for those containing a specific class

Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...

Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...

Two Unique Ionic Menu Options

I am facing an issue with my menus where two different users have separate menus, but upon logout and switching accounts, the old menu persists instead of loading the new one. This code snippet is from the login page: export class authPage { resposeD ...

JavaScript not functional, database being updated through AJAX calls

I have created a game using Phaser, a JavaScript library for games. Now I am looking to implement a score table using JS/PHP. My main focus is on transferring a variable from JS to PHP in order to update the database. I have researched numerous topics and ...

Ways to customize the border of the ListItemButton when it's in a selected state using Material UI?

I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...

What is the process for injecting dependencies in a custom Angular class?

I am facing an issue with my Angular service setup: @Injectable({ providedIn: 'root', }) export class Services { public service1 = new Service1(); } The Service1 class looks like this: export class Service1 { public http: HttpRequ ...

Combining numerous base64 decoded PDF files into a single PDF document with the help of ReactJS

I have a scenario where I receive multiple responses in the form of base64 encoded PDFs, which I need to decode and merge into one PDF file. Below is the code snippet for reference: var pdf_base1 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9 ...

Steps to prevent cart resizing in desktop view:

For a front-end challenge, I need you to design a simple card that displays consistently in both mobile and desktop views. I took a mobile-first approach because I've encountered issues where the card layout changes when viewed on desktop. Check out ...

Angular 2: A Beginner's Guide to Creating Objects and Transforming Code from Angular to Angular 2

Currently, I am learning Angular 2 and facing an issue. I am unsure about how to create an object in my login function (Angular1). public logIn() { let phone = this.user.number.replace(/\s+/g, ''); let email = 'u&a ...

Firebase monitors the authentication status of a user

Trying to maintain a global state in my application based on whether the user is logged in or not has me puzzled. Should I only have a single onAuthStateChanged() in my JavaScript file to monitor state changes and manipulate HTML elements like account deta ...

The error message "Property 'name' does not exist on type 'User'" is encountered

When running this code, I expected my form to display in the browser. However, I encountered an error: Error: src/app/addproducts/addproducts.component.html:18:48 - error TS2339: Property 'price' does not exist on type 'ADDPRODUCTSComponent& ...

Turn off the perpetual active mode

I have a situation where a link maintains its active state after being dragged and released. This is causing an issue that I need to address. For example, you can see the problem here: http://jsfiddle.net/Ek43k/3/ <a href="javascript:void(0);" id="foo ...