primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.22k stars 4.55k forks source link

Sidebar Custom Content rendering error #12728

Open DarienF opened 1 year ago

DarienF commented 1 year ago

Describe the bug

Custom content (header, body, footer templates) not rendering correctly

<p-sidebar
    [(visible)]="displaySidebar"
    position="right"
    [dismissible]="true"
  >
    <ng-template pTemplate="header">Header Content</ng-template>
    <ng-template pTemplate="content">Body Content</ng-template>
    <ng-template pTemplate="footer">Footer Content</ng-template>
  </p-sidebar>

Link to reproduce: https://stackblitz.com/edit/github-ntfeae?file=package.json,src%2Fapp%2Fapp.component.html

Environment

"primeflex": "^3.2.1", "primeicons": "^6.0.1", "primeng": "^15.0.0",

Reproducer

https://stackblitz.com/edit/github-ntfeae?file=package.json,src%2Fapp%2Fapp.component.html

Angular version

14.0.0

PrimeNG version

15.0.0

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

v18.14.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

arthurb4a commented 1 year ago

I have the same issue!

primeng@15.2.0 angular@15.2

My option was to use no templates, just add content inside the p-sidebar tag

<p-sidebar> <!--YOUR CONTENT--> </p-sidebar>

And then remove the extra space on top and bottom of the Sidebar with CSS

.p-sidebar .p-sidebar-header, .p-sidebar .p-sidebar-footer{ display: none; }

KevinCarpNotrs commented 1 year ago

Same deal as arthur, It only seems to render like so for me inside the content div (There's a header div with a close button and an empty footer space that seems to take up about a quarter of space)

<p-sidebar>
<!--content renders here-->
</p-sidebar>

The provided templates for Headers/Content/Footers will fail to render.