PanelMenu formatting looks different after ultima-ng-16.0.0 updated to "primeng: 16.9.8-lts"

[cydriclopez]

This is how PanelMenu looks in ultima-ng-16.0.0 with the default "primeng": "16.0.2" in package.json.

After I changed ultima-ng-16.0.0 to "primeng": "16.9.8-lts" in package.json and then do "npm install" & "ng build" the PanelMenu formatting looks like this.

Here is the new package.json with "primeng": "16.9.8-lts" line.

{
    "name": "ultima-ng",
    "version": "16.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
        "test": "ng test",
        "lint": "ng lint"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^16.1.0",
        "@angular/cdk": "^16.1.0",
        "@angular/common": "^16.1.0",
        "@angular/compiler": "^16.1.0",
        "@angular/core": "^16.1.0",
        "@angular/forms": "^16.1.0",
        "@angular/platform-browser": "^16.1.0",
        "@angular/platform-browser-dynamic": "^16.1.0",
        "@angular/router": "^16.1.0",
        "@fullcalendar/angular": "^6.0.3",
        "@fullcalendar/core": "^6.0.3",
        "@fullcalendar/daygrid": "^6.0.3",
        "@fullcalendar/interaction": "^6.0.3",
        "@fullcalendar/timegrid": "^6.0.3",
        "chart.js": "^3.3.2",
        "primeflex": "^3.3.1",
        "primeicons": "6.0.1",
        "primeng": "16.9.8-lts",
        "quill": "^1.3.7",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.13.0"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^16.1.5",
        "@angular/cli": "~16.1.5",
        "@angular/compiler-cli": "^16.1.0",
        "@types/jasmine": "~4.3.0",
        "jasmine-core": "~4.6.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.2.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.1.0",
        "typescript": "~5.1.3"
    }
}

[cetincakiroglu]

Hi,

Thanks for reporting the issue, we'll investigate and get back to you.

[mehmetcetin01140]

Hi, you can fix the issue by following the steps I'm going to explain.
1- Go to the src > assets > layout > styles > theme > theme-base > components > menu > panelmenu.scss file path.
2- Change the p-panelmenu-header class to p-panelmenu-header-content. Run the command sass --watch src/assets:src/assets --no-source-map in your terminal. Your issue will be fixed with the newly generated styles.