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>
Having recently started using Redux and Typescript, I'm encountering an error where the store is refusing to accept the reducer when working with objects. let store = createStore(counter); //error on counter Could this be due to an incorrect type set ...
I am currently implementing React Router in my navigation component. My goal is to enable users to navigate from screen Y to screen X when they click on a table element. In the past, I achieved this by using "this" command but it seems that it does not ...
I am new to working with Angular2 and I'm currently facing a challenge in implementing authentication for an app using username and password login credentials. Unfortunately, I keep encountering the error message "No Access-Control-Allow-Origin". htt ...
<input type="checkbox" ng-model="isChecked.value" ng-true-value="'yes'" ng-false-value="'no'" ng-click='handleCheckboxChange(isChecked.value, idx);' ng-init="isChecked.value=true" /> ...
When trying to execute the following command within the bootstrap-v5 folder: npm install --save-dev sass, I encountered the error message detailed below: npm ERR! code EPERM npm ERR! syscall symlink npm ERR! path ../sass/sass.js npm ERR! dest/storage/emul ...
One question I've been pondering: we currently have a project built on Java 6 and GWT, but we're considering migrating to Angular (using SOAP web services). Will Java 6 be compatible with Angular for the backend, or will we need to upgrade to Jav ...
I'm facing an issue where I need to display specific addresses for each individual in a table row. For simplicity, let's focus on showing the city specifically as described in this code snippet: https://i.stack.imgur.com/bJmsD.png Currently, whe ...
After relocating the node_modules folder to the parent directory of my project for easier sharing across projects, I encountered an issue when running "npm run dev" within the project folder. The error message displayed: E:\NodeApps\MyApp>np ...
Attempting to utilize the OpenAI Dall-e 2 to modify one of my images using the official Nodejs SDK. However, encountering an issue: This is the snippet of code: const image = fs.createReadStream(`./dist/lab/${interaction.user.id}.png`) const mask = fs.c ...
Currently, I am utilizing Angular version 1.4.7 and in need of a type file corresponding to this specific version. Browsing through the NPM website, I came across a type file for AngularJs listed as version 1.5.14 alpha. Is there a way to access a compreh ...
Looking to make my table sortable, I've been using the https://material.angular.io/components/sort/overview. The "Sort Header" feature is working on other tables in the web-app, I've gone through the documentation, watched tutorials, but for some ...
I am facing a challenge with my mat-table and mat-paginator elements. The table is populated with data from an API, which usually returns 10 elements per request. However, I need to display 25 elements in the table, so I have to make 3 separate API calls t ...
Utilizing the simple-git package, I have implemented the following function: import simpleGit from 'simple-git'; /** * The function returns the ticket Id if present in the branch name * @returns ticket Id */ export const getTicketIdFromBranch ...
While I understand lambdas and function types, I am unsure about the following expression: displayFunc: (string) => string = x => x; I find the two symbols "=>" puzzling. Can someone explain what this means? ...
It's perplexing to me how the 7006 error underlines "data," while in the test environment on the main page of React Hooks (https://react-hook-form.com/get-started#Quickstart), everything works perfectly. I'm wondering if I need to include anothe ...
Currently, I am storing information in the SessionStorage and attempting to display it in my view. However, there seems to be a timing issue where the HTML rendering happens faster than the asynchronous storage saving process. To better illustrate this com ...
In the past, I was using: "ag-grid": "^18.1.2", "ag-grid-angular": "^18.1.1" Version "^18.1.1" of "ag-grid-enterprise". However, as my license expired, I obtained new versions of the licenses. I then included: "@ag-grid-community/angular": "^22.1.1", ...
I am currently working on preserving the types of an object that has string keys and values that can fall into two possible types. Consider this simple example: type Option1 = number type Option2 = string interface Options { readonly [key: string]: Op ...
I'm working on a {N}-Application and facing an issue with importing Images from the tns-core-modules/ui/image module. Unfortunately, it seems that the target cannot be found within the tns-core-module. This is my code snippet: import * as ImageModul ...
I recently began working with Angular4 and ng2 chart. My goal is to display text in the center of a doughnut chart within the canvas. While I am new to Angular4 canvas, I have been trying to achieve this but without success so far. Below is the setup in m ...