Layout incorrect after migrating from ng 8 to ng 14

[dwschulze]

I'm migrating a project from ng 8 to ng 14. I created a new ng 14 project and copied the various files. Some of the .ts files required some modifications, but those seem to be working correctly. My problem is that the layout is incorrect in the ng 14 version, but unfortunately this forum software doesn't let me include an image file. The ng8 version shows my components in a grid, while the ng14 version shows a list. The .html file is below.

These are the .css files in the angular.json file:

Code: Select all

            
            "styles": [
              "src/styles.scss",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/luna-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],

The styling is there, except for the layout. My components are laid out in a list instead of a grid.

Are there other primeng .css files that I need to add?

The documents for various PrimeNG components (e.g. DataView) don't mention anything about the .css files required, but the layout simply doesn't work if the relevant ones are not in the angular.json. Are these documented elsewhere?

Here's the .html:

Code: Select all

<div class="wrapper">
    <div class="left-side ui-g-12 ui-md-12 ui-lg-4">
        <div class="card-block">
            <p-panel>
                <p-header>
                    <div class="panel-header">
                        <span class="panel-title">
                            Data Exchanges
                        </span>
                        <div class="panel-actions">
                            <button pButton icon="pi pi-plus" class="ui-button-success" (click)="overlayForm.toggle($event)">
                            </button>&nbsp;
                            <button pButton icon="pi pi-trash" class="ui-button-danger" (click)="onExchangeDelete()"
                                [disabled]="!isDeleteExchangeEnabled"></button>
                            <p-overlayPanel #overlayForm>
                                <form [formGroup]="exchangeForm" (ngSubmit)="onSubmit()">
                                    <div class="ui-g">
                                        <label for="exchangeInput">Remote Machine</label>
                                    </div>
                                    <div class="ui-g">
                                        <div class="ui-inputgroup">
                                            <input id="exchangeInput" formControlName="exchangeInput" pInputText #exName
                                                type="text" placeholder="Exchange hostname or IP address"
                                                maxlength="45"
                                                autocomplete="off"
                                                (keyup)="receiverIPKeyup($event)"
                                                (click)="openReceiverIPAutocomplete()"
                                            >
                                          <div class="autocomplete" [ngClass]="{'open': receiverIPAutocompleteOpen}">
                                            <div class="item"
                                                 *ngFor="let ip of filteredReceiverIPs"
                                                 (click)="receiverIPSelected(ip)">{{ip}}</div>
                                          </div>
                                            <button pButton type="button" [disabled]="!exchangeForm.valid"
                                                (click)="onSubmit()" label="OK"></button>
                                        </div>
                                    </div>
                                </form>
                            </p-overlayPanel>
                        </div>
                    </div>
                </p-header>
                <div class="exchanges-list-wrapper">
                    <app-exchange-list [exchangesList]="exchangesList" [deleteSubject]="deleteExchangeSubject"
                        [selectSubject]="selectExchangeSubject" (selectedExchange)="onExchangeSelected($event)"
                        (deleteStatus)="onDeleteExchangeStatus($event)"
                        (exchangeHasBeenDeleted)="exchangeHasBeenDeleted()">
                    </app-exchange-list>
                </div>
                <p-footer>
                    <div class="footer-wrapper">
                        <div class="status-wrapper">
                            <div class="rmq-status-wrapper {{rmqState.styleClass}}" pTooltip="{{rmqState.label}}"
                                appendTo="body" tooltipPosition="right">
                                <span class="rmq-status-circle"></span>
                                <span class="rmq-status-title">RMQ</span>
                            </div>
                        </div>
                    </div>
                </p-footer>
            </p-panel>
        </div>
        <div class="card-block">
            <p-panel>
                <p-header>
                    <div class="panel-header">
                        <span class="panel-title">
                            Components
                        </span>
                        <div class="panel-actions">
                            <button pButton icon="pi pi-plus" [disabled]="!selectedExchange" class="ui-button-success"
                                (click)="onAddComponent()">
                            </button>&nbsp;
                            <button pButton icon="pi pi-trash" class="ui-button-danger" (click)="onComponentDelete()"
                                [disabled]="!isDeleteComponentEnabled">
                            </button>
                        </div>
                    </div>
                </p-header>
                <div class="component-list-wrapper">
                    <app-component-list [componentsList]="componentsList" [deleteSubject]="deleteComponentSubject"
                        [creatingComponentSubject]="creatingComponentSubject"
                        [componentStatusSubject]="componentStatusSubject"
                        [exchange]="selectedExchange"
                        (selectedComponent)="onComponentSelected($event)"
                        (deleteStatus)="onDeleteComponentStatus($event)"
                        (deletedComponent)="onComponentDeleted($event)">
                    </app-component-list>
                </div>
            </p-panel>
        </div>
    </div>
    <div class="right-side ui-g-12 ui-md-12 ui-lg-8">
        <div class="card-block component-configuration">
            <p-panel>
                <p-header>
                    <div class="panel-header">
                        <span class="panel-title"> Component Configuration</span>
                        <div class="panel-actions">

                        </div>
                    </div>
                </p-header>
                <div class="component-configuration-wrapper">
                    <app-component-configuration [canAddComponent]="rmqState.isOnline" [exchange]="selectedExchange"
                        [component]="selectedComponent"
                        [addSubject]="addComponent" (componentAdded)="onComponentAdded($event)"
                        [deleteSubject]="deleteComponent" [componentActionButtonsEnabled]="canComponentActionButtonsEnable">
                    </app-component-configuration>
                </div>
            </p-panel>
        </div>
        <div class="card-block empty-block">
        </div>
    </div>
</div>

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>