CODEWITHSUNDEEP
javascriptcssangular
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1616

How to get rid of unnecessary ng-container margin on the page?

I'm controlling two mat tabs with statement.Both mat-tab elements contain card-list and controlled with statement in ng-container.Interestingly on the first tab,card has little margin from top when I hover over the mouse says ng-star-inserted.Opposite of this logic also applied for second mat-tab card element and it has margin from bottom.When I remove <ng-container *ngIf="!appointment.passed"> this line.I can get rid of unnecessary margin but obviously logic doesn't work.How can I get rid of this unnecessary margin without losing the logic which controlls have passed or not.

Margin on top (Active appointments tab)

enter image description here

<ng-container *ngIf="!appointment.passed">

Margin on bottom (Past appointments tab)

enter image description here

<ng-container *ngIf="appointment.passed">

Appointments array below(in the end of each object has passed value true or not.Thats how I determine them passed or not)

0: {id: 36, appointmentDate: "2019-12-27T10:28:15", doctorName: "Conner Reyes", departmentName: "Urology", hospitalName: "Genopkins Hospital", …}
1: {id: 57, appointmentDate: "2020-01-03T08:29:25", doctorName: "Ayesha Brewer", departmentName: "Eye Center", hospitalName: "Genopkins Hospital", …}
2: {id: 40, appointmentDate: "2020-01-11T17:23:39", doctorName: "Shelbie Jenkins", departmentName: "Gynecologic Oncology", hospitalName: "Genopkins Hospital", …}
3: {id: 58, appointmentDate: "2020-01-15T15:45:19", doctorName: "Kirsty Armstrong", departmentName: "Eye Center", hospitalName: "Genopkins Hospital", …}
4: {id: 93, appointmentDate: "2020-01-16T17:26:27", doctorName: "Claire Burton", departmentName: "Eye Center", hospitalName: "Mediclinic Hospital", …}

Upvotes: 0

Views: 3262

Answers (1)

michelnem
michelnem

Reputation: 104

Hi please notice the gap you having is padding and no margin.

in addition angular creating a comment when using <ng-container></ng-container>

not an element for example.

<ng-container *ngIf="true">
  <div>
    hi
  </div>
</ng-container>

will resolved in the DOM as: 

<!--bindings={
  "ng-reflect-ng-if": "true"
}--><!---->
<div _ngcontent-jim-c0=""> hi </div>

if mat-card is an external component try using ::ng-deep in your css component code.

maybe something like:

::ng-deep {
    .mat-card.ng-star-inserted { padding: 0; }
}

Upvotes: 1

Related Questions