javascript — Angular: боковая панель PrimeNG для деления в полноэкранном режиме

Angular: боковая панель PrimeNG для деления в полноэкранном режиме

В моем проекте Angular есть 4 сетки, как показано ниже, и я хочу максимизировать каждую сетку только внутри области сетки (красный прямоугольник) всякий раз, когда нажимаете кнопку полного экрана в верхней правой части этих 4 сеток:

Сетки

Однако каждый раз, когда я нажимаю кнопку полноэкранного режима, сетка открывается в полноразмерном режиме в черной области вместо красной (сетки). Итак, как я могу это исправить? Я думаю, что я должен использовать [fullScreen]="true" и добавить сетку к div внутри красной области, но все равно не получается :(

HTML:

 {amp}lt;h1{amp}gt;Page Header Title{amp}lt;/h1{amp}gt; {amp}lt;div #gridArea{amp}gt; {amp}lt;!-- There are 4 grids opened by loop --{amp}gt; {amp}lt;div class="ui-g-12 ui-lg-6" *ngFor="let employee of employees"{amp}gt; {amp}lt;p-panel"{amp}gt; {amp}lt;button pButton type="button" (click)="visibleSidebar = true" icon="pi pi-th-large"{amp}gt;Full Screen{amp}lt;/button{amp}gt; {amp}lt;div comp-employeeList{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/p-panel{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;ng-template #template{amp}gt; {amp}lt;!-- The grid should be opened inside this area in full screen mode --{amp}gt; {amp}lt;/ng-template{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- This grid only be visible after full screen button is clicked above --{amp}gt; {amp}lt;p-sidebar [appendTo]="template" [(visible)]="visibleSidebar" [fullScreen]="true" [baseZIndex]="10000"{amp}gt; {amp}lt;div class="ui-g-12 ui-lg-6"{amp}gt; {amp}lt;p-panel"{amp}gt; {amp}lt;div comp-employeeList{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/p-panel{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/p-sidebar{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector