Category : splitter

<p-button label="Add" (click)="onAddPanel()"></p-button> <p-splitter [style]="{‘height’: ‘100px’}" styleClass="p-mb-5"> <ng-container *ngFor="let panel of panels"> <ng-template pTemplate> <div class="p-col p-d-flex p-ai-center p-jc-center"> {{panel.name}} </div> </ng-template> </ng-container> </p-splitter> panels = [ {name: ‘Panel1’}, {name: ‘Panel2’}, {name: ‘Panel3’} ]; onAddPanel() { this.panels = […this.panels, …[{name: `Panel${this.panels.length+1}`}] ]; } How to make the p-splitter bind to the new collection and add ..

Read more

I need split page vertically (e.g. 60%:40%) to the two areas and splitter must be draggable. So I chose PrimeNG p-splitter. Right area contains p-table with horizontal scrollbar (based on doc: https://www.primefaces.org/primeng/showcase/#/table/scroll part: "Horizontal and Vertical"): <p-splitter [panelSizes]="[60,40]" [style]="{‘height’: ‘400px’}"> <ng-template pTemplate> <p-table [value]="cars" [scrollable]="true" [style]="{width:’600px’}" scrollHeight="200px"> … </p-table> </ng-template> <ng-template pTemplate> Panel 2 </ng-template> ..

Read more

Getting error attached in screenshot Referred to https://github.com/angular-split/angular-split/issues/135 but did not work for me. in mobile mode on dragging splitters. HTML <as-split [direction]="’vertical’"> <as-split-area> <as-split [direction]="’horizontal’"> <as-split-area> <p> lorem ipsum </p> </as-split-area> <as-split-area> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque </p> <p> Sed ut perspiciatis unde omnis iste natus ..

Read more