AAE-34885 Form with tabs has incomplete frame in preview (#10880)

* AAE-34885 Form tabs preview frame size and width fix

* AAE-34885 fixing form preview in modeling app

* AAE-34485 workspace-app form scroll fix

* AAE-34485 fixing margin issues on the modeling app form preview

* fixing width issues on preview

---------

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
This commit is contained in:
Soumyajit Chakraborty
2025-05-19 15:40:06 +05:30
committed by GitHub
parent 8b47434c37
commit 2fd960bf5c
4 changed files with 10 additions and 20 deletions

View File

@@ -4,9 +4,9 @@
<div *ngIf="hasTabs()" class="alfresco-tabs-widget"> <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
<mat-tab-group> <mat-tab-group>
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate "> <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
<div class="adf-form-tab-content"> <ng-container class="adf-form-tab-content">
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" /> <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
</div> </ng-container>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>

View File

@@ -15,11 +15,9 @@
.alfresco-tabs-widget { .alfresco-tabs-widget {
width: 100%; width: 100%;
position: absolute;
.adf-form-tab-group { .adf-form-tab-group {
width: 100%; width: 100%;
z-index: 9999;
} }
#{ms.$mat-tab-body} { #{ms.$mat-tab-body} {
@@ -30,16 +28,17 @@
z-index: 10; z-index: 10;
margin: 0; margin: 0;
background-color: white; background-color: white;
position: sticky; position: absolute;
/* stylelint-disable-next-line value-no-vendor-prefix */ width: 96%;
position: -webkit-sticky; /* macOS/iOS Safari */
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */
margin-left: 0 !important; margin-left: 0 !important;
/* stylelint-disable-next-line declaration-no-important */
margin-right: 10px !important;
top: 0; top: 0;
} }
#{ms.$mat-tab-body-wrapper} { #{ms.$mat-tab-body-wrapper} {
padding-top: 16px; padding-top: 5%;
} }
} }

View File

@@ -78,8 +78,7 @@
<mat-card-content class="adf-form-container-card-content"> <mat-card-content class="adf-form-container-card-content">
<adf-form-renderer [formDefinition]="form" [readOnly]="readOnly" /> <adf-form-renderer [formDefinition]="form" [readOnly]="readOnly" />
</mat-card-content> </mat-card-content>
<div class="adf-cloud-form-content-card-actions"> <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-cloud-form-content-card-actions" align="end">
<mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
<mat-checkbox <mat-checkbox
id="adf-form-open-next-task" id="adf-form-open-next-task"
*ngIf="showNextTaskCheckbox && showCompleteButton" *ngIf="showNextTaskCheckbox && showCompleteButton"
@@ -103,7 +102,6 @@
</button> </button>
</ng-container> </ng-container>
</mat-card-actions> </mat-card-actions>
</div>
</div> </div>
</mat-card> </mat-card>
</div> </div>

View File

@@ -72,9 +72,10 @@
} }
&-content-card { &-content-card {
padding-bottom: 4em; padding-bottom: 2em;
overflow-y: auto; overflow-y: auto;
position: static; position: static;
height: 70%;
&-fullscreen { &-fullscreen {
padding: 0; padding: 0;
@@ -92,14 +93,6 @@
} }
} }
} }
&-actions {
position: fixed;
bottom: 0;
width: -webkit-fill-available;
z-index: 1;
background-color: white;
}
} }
&-sidebars { &-sidebars {