Which @angular/* package(s) are the source of the bug? animations<

angular,angular

Comments (2)

dreamstar-enterprises commented on May 1, 2024

I find that if the child component is this, the backdrop fades in as normal, but the modal, snaps into existence.
And the backdrop fades out as normal, but the modal, snaps out, when the backdrop has fully faded out. The two divs are independent, and not nested one into the other.

Child component

<div role="document" class="main-modal" (click)="stopPropogation($event)">

  <!-- Modal Container Main -->
  <div class="modal-main-container">

    <!-- Modal Header -->
    <div class="modal-header-container">
      <div class="modal-header">
        <span>{{ modalTitle() }}</span>
        <app-close-button (buttonClick)="close($event)"/>
      </div>
    </div>

    <!-- Modal Body & Modal Footer -->
    <!-- router specific html template rendering logic -->
    @switch(modalContent()){
      @case ('Contract') {
        <ng-container *ngTemplateOutlet="contractBodyAndFooter"></ng-container>
      }
      @default {
        <p>Invalid Menu Content</p>
      }
    }

  </div>

</div>

<!-- Modal Confirm Back Drop -->
<div class="element-backdrop" (click)="close($event)">
</div>

Here is the child css too

/* element backdrop */

.element-backdrop {
  width: 100%;
  height: 100%;
  background-color: var(--modal-backdrop-color);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* main modal styles */

.main-modal{
  position: absolute;
  z-index: 4;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
  max-height: var(--modal-max-height);
  width: 330px;
  height: auto;
  border: none;
  background-color: var(--white-color);
  border-radius: 10px;
  box-shadow: 0 15px 50px 0 var(--modal-box-shadow-color)
}

/* main container styles */

.modal-main-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* header styles */

.modal-header-container {
  display: flex;
}

.modal-header {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 7px 16px;
  color: var(--modal-text-title-color);
  font-size: 0.93rem;
  font-weight: bold;
  border-bottom: 1px solid var(--modal-header-border-bottom-gray-color);
}

.modal-header-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* body styles */

.modal-body-container {
  padding: 12px 10px 12px 10px;
  height: auto;
  flex-grow: 1;
  overflow-y: auto;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.93rem;
}

/* divider styles */

.horizontal-divider {
  border-top: 1px solid var(--modal-horizontal-divider-gray-color);
  border-color: var(--modal-horizontal-divider-gray-color);
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}

/* footer styles */

.modal-footer-container {
  padding: 10px 20px 10px 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

from angular.

dreamstar-enterprises commented on May 1, 2024

This was a css bug. I was using position static, rather than a position that is not static. The z-index because of this was having no effect. Resolved.

from angular.

Recommend Projects