fix(angular): inline modals now add .ion-page class correctly (#24751)

resolves #24750
This commit is contained in:
Liam DeBeasi
2022-02-09 10:57:21 -05:00
committed by GitHub
parent 0580d65821
commit ef46eafc94
3 changed files with 6 additions and 2 deletions

View File

@ -73,7 +73,7 @@ export declare interface IonModal extends Components.IonModal {
@Component({
selector: 'ion-modal',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container>`,
template: `<div class="ion-page"><ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container></div>`,
inputs: [
'animated',
'backdropBreakpoint',

View File

@ -60,4 +60,8 @@ describe('Modals: Inline', () => {
cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
});
it('should have a div with .ion-page', () => {
cy.get('ion-modal').children('.ion-page').should('exist');
});
});

View File

@ -89,7 +89,7 @@ export const CoreDelegate = () => {
BaseComponent.appendChild(el);
await new Promise(resolve => componentOnReady(el, resolve));
} else {
} else if (BaseComponent.children.length > 0) {
// If there is no component, then we need to create a new parent
// element to apply the css classes to.
const el = BaseComponent.ownerDocument && BaseComponent.ownerDocument.createElement('div');