ARTICLE AD BOX
I am using the PrimeNG Accordion component where the first panel contains a form and the second and third panel contain tables. See an example here:
https://stackblitz.com/edit/wawhkkem-rwy91iox
<theme-switcher /> <div class="card flex justify-center"> <p-accordion [value]="['0', '1', '2']" [multiple]="true"> <p-accordion-panel value="0"> <p-accordion-header>Header I</p-accordion-header> <p-accordion-content> <p class="m-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan bibendum volutpat. Nunc tristique at arcu ac vehicula. Nulla sed semper nisi, at imperdiet leo. Maecenas ac interdum magna, et porttitor erat. Morbi aliquet, elit quis placerat bibendum, diam mi imperdiet massa, et tincidunt massa sapien a urna. </p> </p-accordion-content> </p-accordion-panel> <p-accordion-panel value="1"> <p-accordion-header>Header II</p-accordion-header> <p-accordion-content> <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }"> <ng-template #header> <tr> <th>Code</th> <th>Name</th> <th>Category</th> <th>Quantity</th> </tr> </ng-template> <ng-template #body let-product> <tr> <td>{{ product.code }}</td> <td>{{ product.name }}</td> <td>{{ product.category }}</td> <td>{{ product.quantity }}</td> </tr> </ng-template> </p-table> </p-accordion-content> </p-accordion-panel> <p-accordion-panel value="2"> <p-accordion-header>Header III</p-accordion-header> <p-accordion-content> <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }"> <ng-template #header> <tr> <th>Code</th> <th>Name</th> <th>Category</th> <th>Quantity</th> </tr> </ng-template> <ng-template #body let-product> <tr> <td>{{ product.code }}</td> <td>{{ product.name }}</td> <td>{{ product.category }}</td> <td>{{ product.quantity }}</td> </tr> </ng-template> </p-table> </p-accordion-content> </p-accordion-panel> </p-accordion> </div> import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; import { TableModule } from 'primeng/table'; @Component({ selector: 'accordion-basic-demo', templateUrl: './accordion-basic-demo.html', standalone: true, imports: [ImportsModule], }) export class AccordionBasicDemo { products = [ { code: 'abcd', name: 'First', category: 'A', quantity: 1, }, { code: 'bcde', name: 'Second', category: 'B', quantity: 1, }, { code: 'cdef', name: 'Third', category: 'C', quantity: 1, }, { code: 'defg', name: 'Fourth', category: 'D', quantity: 1, }, { code: 'efgh', name: 'Fifth', category: 'E', quantity: 1, }, { code: 'fghi', name: 'Sixth', category: 'F', quantity: 1, }, { code: 'ghij', name: 'Seventh', category: 'G', quantity: 1, }, { code: 'hijk', name: 'Eighth', category: 'H', quantity: 1, }, { code: 'ijkm', name: 'Ninth', category: 'I', quantity: 1, }, ]; }The goal would be for the panels with the tables to conform to the size of the screen, expanding to fill the space and shrinking to not overflow the screen, displaying a scroll bar where necessary. I have tried various styling strategies, including changing the overflow, flex, and height properties, but none of them have allowed for the behavior that I am looking for. Is there a way to style the accordion and the tables to achieve this?
