Looking for a way to make just the table body scrollable in Angular 4 using ngx-infinite-scroll. I've tried some CSS solutions but haven't found one that works. Any help or documentation on this issue would be greatly appreciated.
I attempted the following CSS, however, it did not produce the desired result:
.tbody {
height: 100px;
overflow-y:scroll;
}
After some trial and error, I managed to make this work on my own! The solution involves adding a box shadow and a fixed header on the table. Hopefully, this code snippet will be useful to someone who needs it.
CSS:
.shadow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.jumbotron {
padding: 2rem 1rem;
}
tbody {
display: block;
height: 20rem;
overflow: scroll;
}
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}HTML:
<div class="shadow">
<table class="table table-hover">
<thead class="thead-info">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Key</th>
</tr>
</thead>
<tbody infiniteScroll [infiniteScrollDistance]=".1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
<div *ngIf="!tuneService.tunes" class="text-center justify-content-center">
<h2>Loading...</h2>
</div>
<tr *ngFor="let tune of page.data | async" routerLink="/tune-details/{{tune.id}}">
<td>{{tune.title}}</td>
<td>{{tune.artist}}</td>
<td>{{tune.musicalKey}}</td>
</tr>
<app-spinner *ngIf="page.loading | async"></app-spinner>
</tbody>
</table>
</div>
Recently, I developed an angular application that sends an HTTP post request to a Node/Express.js endpoint upon clicking a button in order to obtain an authorisation token. I successfully configured the necessary credentials for basic OAuth2 authorisation ...
Recently, I installed the latest version of aws-amplify using npm. After running npm init with 'entryPoint.js' as the entrypoint file, I encountered an issue when pasting the following code at the top of entryPoint.js: import Amplify, {Auth} from ...
After cloning a starter code of express, I encountered an issue when running npm install to install packages from "packagejson". However, when using Yarn with yarn install, all packages were installed successfully. This has happened to me before and I am c ...
I'm currently facing an issue while trying to import a dump to a database using node.js and the npm module 'mysql-import'. Initially, I wrote the code in JavaScript and it worked flawlessly. However, when I attempted to modify it for TypeScr ...
For my project, I am incorporating the third-party jQuery library called https://github.com/mkoryak/floatThead. To work with Bootstrap and jQuery, I have installed them using NPM through the command line. Additionally, I have used NPM to install floatThea ...
Dealing with an array of data that needs to be sorted for displaying in a component seems to be a challenge. Despite having a functional code sample demonstrating the concept, the sorting is not reflected in the Angular app's DOM. The original data i ...
I encountered an error while running "ng serve" in my Angular application. Originally built as Angular 2, it was upgraded to Angular 8 (with attempts at versions 6 and 7 along the way). However, after migrating from Angular 5, I started experiencing errors ...
I'm searching for a way to achieve the same functionality as .npmignore but for yarn workspaces. Let's consider a scenario where I have a package named '@walnut/peanut' with test, src (typescript), and lib (compiled javascript) folders ...
Wondering if there is a method in Angular Reactive to access all FormGroups on the parent component. When I set a custom component that creates a new FormGroup within its own component, it does not reflect on the parent component. Is there a way to retri ...
I am encountering a problem with compiling a specific section of code in my Angular2 project. public reloadRecords() { let step = (this.timeInterval.max - this.timeInterval.min) / this.recordsChartSteps; let data = new Array(this.recordsChartSteps ...
I've encountered an issue with my scrollView that allows for infinite scrolling until the banner or container disappears. What I'm aiming for is to restrict scrolling once you reach the last section, like number 3, to prevent the name part from m ...
Currently, I am in the process of developing a Vue 3 component library using Vue 3, Vite, and TypeScript. The unique aspect about this library is that it installs as a plugin and registers all components as global entities. Here is an overview of how this ...
Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...
Is the usage of RxJs observables in Angular comparable to that in React and MobX? I'm struggling to find information on this topic. ...
I have admin privileges on a VPS running CentOS 5.9 with Python 2.4.3 installed by default. I decided to upgrade to Python 2.7.3 using the commands below (I opted for make altinstall instead of make install): wget http://www.python.org/ftp/python/2.7.3/Py ...
Currently, I am developing an AngularJS application. However, when attempting to start the dev server, I encountered an issue with my ng serve command: https://i.stack.imgur.com/QujSe.png ...
It appears that most people find observers to be a piece of cake, but I personally struggle with them. I am trying to set up an observable that can receive a number input after it has been created, triggered by pressing a button. However, all the examples ...
I am looking to limit the input capacity to 16 numbers and add a space between each set of 4 numbers. After conducting an extensive search for a credit card input that allows users to enter 16 digits with a " - " or space in between, all results were for ...
Consider the following scenario: class Table<ValuesType extends DefaultTableValues = DefaultTableValues>{ public values: ValuesType; constructor(initialValues:ValuesType) { this.values=initialValues; } public set(newValues:Pa ...
For the past six months, I have been utilizing async/await and have truly enjoyed the convenience it provides. Typically, I adhere to the traditional usage like so: try { await doSomethingAsync() } catch (e) {} Lately, I've delved into experimenti ...