Eliminate spacing gaps between the loading bars in ngx-skeleton-loader for Angular

In my current project using Angular11 with material and ngx-skeleton-loader, I am facing an issue with styling loading bars. I am trying to remove all spacing between the bars, but setting the margin and padding to 0px does not completely eliminate the space. Although it is a small amount, I still want it to be gone. https://i.sstatic.net/WGLNN.png

Even after adding a theme with 

'margin': '0px', 'padding': '0px'
, most of the spacing is cleared but not all of it. When inspecting the element using dev tools, it shows no margin or padding, yet the space persists:

https://i.sstatic.net/2mF3T.png

If anyone knows how to completely remove the space, I would greatly appreciate the help.

For reference, here is a stackblitz demonstration: https://stackblitz.com/edit/remove-space-between-loaders?file=src/app/app.component.html

cssangularsass

Answer №1

To enhance the styling of the loader element, include margin-bottom: -4px !important; within the css class.

The updated outcome can be viewed here:

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

Tips for creating a vertical Angular Material slider with CSS

Attempting to modify the angular material directive to render vertically has been a challenge. I experimented with using transform:rotate in the CSS, however, it resulted in the slider behaving and rendering differently. md-slider { position: absolute ...

javascriptcssangularjshtmlangular-material

Sending Text Input Data from Angular Form to a Restful API

I'm currently working on a project where I need to send data from a reactive form to a REST API running on my local express.js server. The form consists of basic text input fields like name, surname, and email. When the form data is submitted, it is ...

javascriptangularresttypescriptexpress

Creating a responsive web design with a user-friendly CSS grid layout

Currently, I am delving into the realm of CSS grid to better comprehend its functionality. In my layout design, there are two menus (colored in red) positioned on either side of a central main content box (colored in blue). As the screen size reduces and ...

htmlcssgridgrid-layoutcss-grid

Trouble arises when using Wijmo's valueChanged event and data binding in Angular 2

As I was working on the following code snippet that triggers a function when the user modifies the wj-input-time value: @Component({ selector: 'my-app', template: '<wj-input-time [step]="1" (valueChanged)="test()"></wj-inpu ...

javascripteventsangularevent-handlingwijmo5

Showing pdf documents without relying on third-party software

Within my Angular application, I have integrated the following snippet into an HTML template: <embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf"> The representation of this code ...

htmlcssangulartypescriptpdf

Transformation of entryComponents to Angular 9 Ivy

@Component({ selector: 'dynamic', template: '<ng-template *ngFor="let portal of portals" [cdkPortalOutlet]="portal"></ng-template>', // entryComponents before Ivy entryComponents: [Component1, Component2, Compone ...

angularangular9angular-ivy

What is causing errors in my Yeoman build when I use Ruby and Gems paths?

Currently, I am utilizing Yeoman to construct an Angular.js application. I have chosen to enable support for Sass and Compass in it. However, when attempting to build with Grunt, the process fails due to inability to locate Ruby for compiling the scss file ...

rubyangularjssassyeoman

Is there a way to use flexbox to decrease the size of images?

Struggling to make my code mobile-friendly. The PC version looks good, but on mobile, the bio stretches and text goes off the page. I can't seem to get the picture to shrink when viewed on a mobile device, or have the content neatly boxed alongside it ...

cssimagemobileflexboxshrink

When the page is first loaded, the select options dropdown using NgFor and NgValue does not display the initial object from the list

I am facing an issue with a select options dropdown that contains a list of objects. I have used ngValue to set the value of the dropdown as an object. However, upon page load, the dropdown does not display the first object from the list; it only shows obj ...

angularangular7

Struggling to populate a table with data

I've previously sought help on this project and I'm still facing challenges. The code is messy with duplicate functions, making it hard to manage. Currently, my main issue is fetching data from Firebase and updating a table with it. <div cla ...

angulartypescriptgoogle-cloud-firestorematerial-ui

Guide on setting up the IIS URL Rewrite module for seamless integration with both "HTML 5 pushState" functionality and hash fragments in the URL

Angular 2 utilizes a PathLocationStragy for handling html5 routes and a HashLocationStrategy for managing hash fragments '#' in routes. An issue arises when OIDC (OpenID Connect) is used for user authentication along with PathLocationStragy (or ...

angularjsangulariisurl-rewriting

Obtain unique entries from a Firestore collection search

Seeking assistance in filtering an observable to only contain unique records. I am using the observable in an angular mat-autocomplete with an async pipe and querying firebase based on the user's input. The code for the mat-autocomplete template: ...

angularfirebaserxjsobservablerxjs-pipeable-operators

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

csscross-browsergeometrycss-shapes

Status:0 was received as the response from URL:null during the REST call made from my iOS Ionic application

I am currently facing an issue with a rest call in my Ionic app. The call works fine on Android devices but encounters problems on iOS devices. Below is the implementation of the rest call in my Ionic service. import { Http } from '@angular/http&apos ...

iosangulartypescriptionic2ionic3

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

I am currently facing an issue with recharts while trying to implement a BarChart. The setting width={600} and height={300} is causing the Barchart to be fixed in size, rather than responsive. How can I make the BarChart responsive? I attempted using per ...

javascriptcssreactjsmaterial-uirecharts

Adjust the date input alignment in mobile browsers

I am trying to align the entered date to the left in input[type='date']. However, when testing on mobile browsers like safari and chrome, the date remains centered within the input. mobile example This is the code I have been working on: .co ...

htmlcss

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue;"> <div fxLayout="column" style="width: 50%;">1stOne </div> <div fxLayout="column" styl ...

htmlcssangularlayoutflexbox

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss

An uncaught security error occurred when attempting to execute the 'pushState' function on the 'History' object

Here are the routes in my application: const routes:Routes =[ {path:'', component:WelcomeComponent}, {path:'profile', component: ProfileComponent}, {path:'addcourse', component: AddcourseComponent}, {path:'course ...

javascriptangulartypescriptangular4-router

Exploring the Power of PrimeNG and Observables in Angular 4 with RxJS

After configuring my Angular 4 project with a service like this: const usersURL = 'http://my.super.url.php'; @Injectable() export class UserService { users: Observable<User[]> constructor (public http:Http) let tick$ = Observ ...

angulartypescriptrxjsprimeng