How to implement a scrollbar for tables using Angular

How can I implement a vertical scroll bar only for the table body in my Angular code? I want the scroll bar to exclude the header rows.

Since all rows are generated by ng-repeat, I am unsure how to add overflow style specifically for the table body.

Here is the HTML code snippet:

<div class="nu-table">
    <div class="nu-table-row nu-header">
        <div class="nu-table-cell">A</div>
        <div class="nu-table-cell" style="width: 33%">B</div>
        <div class="nu-table-cell" style="width: 34%">C</div>
    </div>
    <div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
        <div class="nu-table-cell"  ng-bind="map.A"></div>
        <div class="nu-table-cell">{{map.B}}</div>
        <div class="nu-table-cell" ng-bind="map.C"></div>
    </div>
</div>

Below is the CSS content used for styling:

.nu-border-table{
    border: solid 1px #ccc; 
}

.nu-border{
    border: solid 1px #ccc;
}


.nu-table{
    background-color: #fff;
    padding: 5px;
    overflow: scroll;
    display: table;
    table-layout: fixed;
    width: 100%;
}

/* Rest of the CSS properties... */
javascripthtmlcssangularjs

Answer №1

Attempt incorporating a div element around the rows (not validated):

    <div class="custom-table">
        <div class="custom-table-row custom-header">
            <div class="custom-table-cell">A</div>
            <div class="custom-table-cell" style="width: 33%">B</div>
            <div class="custom-table-cell" style="width: 34%">C</div>
        </div>
        <div class="custom-table-body">
           <div class="custom-table-row stripe-pointer-cursor" ng-repeat=" map in mapList">
              <div class="custom-table-cell"  ng-bind="map.A"></div>
              <div class="custom-table-cell">{{map.B}}</div>
              <div class="custom-table-cell" ng-bind="map.C"></div>
          </div>
        </div>
    </div>

With corresponding CSS modifications (adjusting height as needed)

.custom-table-body {
    overflow-y:auto;
    max-height:500px;
}

Answer №2

To achieve a design where the header has a transparent scroll bar and the data section has a visible/auto scroll bar, you can use two div elements. Below is an example with Angular code snippet for looping through the data.

Here is the code snippet that worked for me -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

To hide the scrollbar on the header, you can add the following additional styles -

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>

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

Angular 6: Dealing with Type Errors in the HttpClient Request

I am encountering issues with my services. I am attempting to retrieve a list of media files (generated by NodeJS, which generates a JSON file containing all media items). Although I can successfully fetch the data, I am facing an error stating "Property & ...

javascriptnode.jsangulartypescript

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

Convert form data into a JSON object utilizing JQuery and taking into account nested JSON objects

Currently, I am facing an issue while extracting data for submission using the jQuery `serializeArray()` function. This function works efficiently by providing an array of { name: value } objects, where the name corresponds to the elements in the form. How ...

javascriptjqueryhtmljson

The displayed value in the text field remains constant even when the object's attribute is modified

My issue involves the Date Text Field component of Material UI. Whenever I pass an attribute from an object, the displayed value in the Text Field does not update even when the object attribute changes. const [data, setData] = useState({ title: new Da ...

javascriptreactjsmaterial-ui

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

When working with a String variable in JSP and trying to display it in a form field, there might be an issue if the string contains spaces. Only the first word is displayed instead of the entire sentence. Below is the code snippet along with the resulting ...

javahtmlcssjsp

Angular and AngularJS directives work together to indicate events on a line chart

Currently, I am creating a dashboard using AngularJS along with Angularjs-nvd3-directives, mainly focusing on line charts. I am interested in adding markers to the chart for specific events. For instance, if I have a time series data, I want to be able to ...

javascriptangularjsnvd3.js

Struggling to send information using Angular $resource?

I've been working on sending data to an API using Angular's $resource. Currently, I can successfully retrieve data from my test server using a GET request or querying. However, I'm having trouble figuring out how to send new data to the serv ...

javascriptangularjsrestwebfactory

What is preventing me from modifying the data in a JSON object?

My task is to update the value "customer.signature", but I am facing an issue with my code. The JSON and HTML seem to be error-free, so the problem lies within my JS code. While "data.signature" updates correctly, "data.customer.signature" does not. The J ...

javascriptjsonangularjs

Are you familiar with the Puppeteer PDF tool that generates empty pages from the cloud and seamlessly integrates with Postman? What do

After days of searching, tweaking, and deploying, I still can't get this to work. I'm hoping it's just a simple mistake on my part that someone else can help me with. I am attempting to use Puppeteer to generate a PDF from a Node.js Express ...

javascriptnode.jsexpresspdfpuppeteer

When I try to scroll on my mobile device, the element is forced to reload

My donate page has a header with a generic placeholder image. On mobile devices like iPhones and Androids, the page initially looks great. However, when I scroll down and then back up, the header disappears for a moment before reappearing as originally ren ...

htmlcss

What advantages does withStyles offer that surpasses makeStyles?

Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles? ...

cssreactjsmaterial-ui

The importance of adding ".$" to an AngularJS filter object

I have been exploring a section of code related to filtering in AngularJS from the documentation website. (cf. http://docs.angularjs.org/api/ng.filter:filter) Specifically, I am curious about the use of .$ appended to the object search, as shown in the fo ...

javascriptangularjs

Possible revision: "Methods for updating Bootstrap language settings?"

Currently, I am working on a project using ASP.NET Core in combination with Bootstrap. Recently, I successfully integrated localization support by following the guidance provided in this documentation. However, I encountered an issue where the Bootstrap fr ...

javascriptjqueryasp.netasp.net-corebootstrap-4

What is the process for adding the multiple attribute to a select dropdown in a form?

I implemented the selectric plugin for dropdowns on my website. I included the multiple attribute in the select tag, but it doesn't seem to be functioning properly based on what is shown on the index page of the selectric plugin located at: This is t ...

jqueryhtmljquery-selectric

Solution to determining if an object contains a certain value in AngularJS

Currently, I am working on avoiding duplicates and preventing the addition of empty items. In case I attempt to add an item with the same title (for example, Harry Potter) that already exists in $scope.libri, I want to prevent it from being added again. Is ...

angularjs

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

htmlreactjssvggoogle-visualizationmaterial-ui

"Is it possible for the package-lock.json file to not update when a package is removed from the

When I add a package manually to my package.json file and run npm install, the dependencies of that new package are updated in my package-lock.json. However, if I then delete that package from package.json and run npm install, the dependencies of that pac ...

javascriptnpm

Error: Encountered an unexpected token while trying to parse multiple form functions

I recently added the following submission function to my .js file: $( "form" ).on( "submit", function( event ) { event.preventDefault(); var data = $( this ).serialize(); $.ajax({ type: "POST", url: "content/rev/a_sub ...

javascriptjquery

Is there a way to adjust the spacing between a specific background image in a design pattern? The image must be sourced online

I am currently working on creating a background pattern using only online images, and I need to adjust the spacing between them. Is there a way to specifically control the space between the images in the pattern using CSS? I know about the round and space ...

cssdesign-patternsbackground-image

Add elements from one array into designated positions within another array

Is there a way to extract the days and months from the current week and store it in an array within a specific field of an object? I need to be able to later iterate through this array to display the data. I am unsure on how to achieve this. <div v-for ...

javascriptvue.jsnuxt.js