Implement a scrollbar for non-header rows in an Angular application

I am working on an Angular table and need to implement a vertical scroll bar exclusively for the table body, excluding the header. How can I achieve this?

Since the rows are dynamically generated using ng-repeat, I'm unsure how to apply the overflow style.

When attempting to add an additional div to wrap all non-header rows, it disrupts the table layout causing all rows to display in a single column.

http://example.com

    <div class="custom-table">
        <div class="custom-table-row custom-header">
            <div class="custom-table-cell">A</div>
            <div class="custom-table-cell">B</div>
            <div class="custom-table-cell">C</div>
        </div>
        <div class="custom-table-row custom-striped pointer-cursor" ng-repeat="item in itemList">
            <div class="custom-table-cell"  ng-bind="item.A"></div>
            <div class="custom-table-cell">{{item.B}}</div>
            <div class="custom-table-cell" ng-bind="item.C"></div>
        </div>
    </div>

Answer №1

If you want to group them together, try enclosing all of them in

<div style="display: table-row-group">

As per information from references, this will act like <tbody> and allow you to include a scroll bar.

Remember to transfer the style to your CSS file for better organization.

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

What is the method for adjusting the position of this box-shadow?

As a beginner in coding, I stumbled upon this box shadow effect online but I am struggling to adjust it to match the font style I am using. Here is the CSS for the title: .sidebar-title { position:absolute; z-index:150; top:100px; left:330px; ...

Start a fresh project using Angular-js

As a newcomer to AngularJs, I am eager to start my own project using Angular-JS. However, when attempting to create a new project through the command prompt by running 'ng new myProject', I encountered an error: ng new myProject ? Select project ...

AngularJS encounters an issue while attempting to print a PDF file

I am encountering an issue with printing a PDF file that was generated using reportViewer in my Web API. The browser displays an error when attempting to open the PDF file. Below is the code snippet from the controller in my Web API: // ...generate candi ...

Tips for maintaining HTML lines within an 80-character limit

Someone mentioned to me the importance of keeping HTML lines under 80 characters. My code editor, Atom, even displays a reminder for this limit. I've come across many discussions on this topic but haven't found any examples. For instance, consid ...

AngularJS receiving a rating of only half a star

I need help developing an application that requires implementing a half star rating system using Angular Js. How can I go about achieving this? Specifically, how can I make it so that when a user hovers over a star, it displays both a half star and a ful ...

Looking for help with Vue.js/Vuetify - having issues with input field and removing items from list

Currently, I am busy diving deep into Vuejs and encountering a couple of challenges. The first issue I am facing is while creating a basic todo app with CRUD functionality. When passing data through an input field, it refuses to adhere to full-width setti ...

I don't understand why my BeautifulSoup code is throwing an attribute error even though the variable it's referring to is assigned a value

Currently, I am working with Python 3.9.1 along with selenium and BeautifulSoup to develop my first web scraper targeting Tesco's website. This is essentially a mini project that serves the purpose of helping me learn. However, upon running the code p ...

When Hovering, Pseudo-class Cannot be Applied

In my design, I have an image overlaid with a Play icon. The concept is that when the user hovers over the image, the brightness of the image decreases and the Play icon is replaced with a Magnifying Glass icon. However, there seems to be a problem. When ...

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...

Troubleshooting: @keyframes not functioning properly in slideshow

Having trouble getting my image slider to function properly. I want to use it as a header for my page, but the images are not sliding like they should. I've attempted using prefixes for Chrome, but that hasn't solved the issue. <html> < ...

the stacking context of elements with z-index and relative positioning

I am currently working on a modal that is toggled using JavaScript. Within the modal, I am dynamically adding an image using JavaScript. Additionally, there will be a div element overlaying the image to simulate cropping (extract coordinates from the imag ...

The navigation bar seems to be positioned too low on the

I have successfully created a simple navbar on my website using HTML and CSS. Everything seems to be working fine, except for one issue - there is an unwanted space between the image and the navbar itself. My goal is to make the navbar sit right below th ...

How can I increase the fading effect more and more with each call of the event using jQuery's fadeTo()?

I'm currently working on a script that is intended to gradually fade an image from 80% opacity to 1%, but every time I click, it goes straight to the set opacity. How can I make the fading effect continuous? Any help would be appreciated. Here is the ...

The navigation bar and footer are not utilizing the entire width of the browser

Something seems off on the Safari browser, as there's still a gap in the right side of the navbar and footer. I've been using Bootstrap and steering clear of Javascript. Any ideas on how to fix this? Appreciate any help. Thanks! Here's the ...

tslint issues detected within a line of code in a function

I am a novice when it comes to tslint and typescript. Attempting to resolve the error: Unnecessary local variable - stackThird. Can someone guide me on how to rectify this issue? Despite research, I have not been successful in finding a solution. The err ...

Looking for Efficiency in Basic JavaScript Arithmetic Operations

I'm having trouble figuring out how to display a total price after a selection is made. My goal is to take the selected value, multiply it by 100, and then use the updateTotal function to show the total. // Gather Data & Prices for Updating Dynamic P ...

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

Unlock the power of Angular pipes in window.open with URL parameters!

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)"> </div> The fullPath function concatenates the domain part to the relative URL stored in file_URL. However, there seems to be an issue as it i ...

How can I display a button (hyperlink) on a new line using CSS or jQuery?

I am looking to create a new line after the last input of my form. On this new line, I want to add a "remove-link". This is my HTML: <div class="subform dynamic-form"> <label for="id_delivery_set-0-price"> Price: </label> <inp ...

What is the process for transferring data from an ng-controller to a different jsp page when the send button is clicked?

With the data retrieved from an HTTP response in MyCtrl, I want to display the product information. When I click on checkout, how can I bind and send all this information to another JSP page using AngularJS? Your assistance is greatly appreciated. <d ...