Merge pull request #501 from Madhuravas/develop

MOSIP-28879 resolved address dropdown alignment for large and hug font sizes
mosip · Sep 26, 2023 · 4b04498 · 4b04498
2 parents 6d2759b + 4f10079
commit 4b04498
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 10 deletions.
diff --git a/resident-ui/src/app/feature/uinservices/personalisedcard/personalisedcard.component.css b/resident-ui/src/app/feature/uinservices/personalisedcard/personalisedcard.component.css
@@ -78,6 +78,15 @@ button[disabled=disabled], button:disabled {
     color: #505050;
 }
 
+::ng-deep .mat-menu-panel.each-lang-card{
+    min-height: 55px !important;
+    max-height: 200px !important;
+}
+
+::ng-deep .cdk-overlay-connected-position-bounding-box{
+    bottom: 0px !important;
+}
+
 @media screen and (max-width:465px){
     .each-property{
         width: 65%;

diff --git a/resident-ui/src/app/feature/uinservices/personalisedcard/personalisedcard.component.html b/resident-ui/src/app/feature/uinservices/personalisedcard/personalisedcard.component.html
@@ -22,7 +22,7 @@ <h3 style="color: #505050;">{{'personalisedcard.title' | translate}}</h3>
 							</td>
 							<td *ngIf="data.formatRequired" style="width:40%">
 								<button disabled [disabled]="!data.checked" mat-button [matMenuTriggerFor]="basic">{{data.formatOptionLabel[langCode]}}<mat-icon>keyboard_arrow_down</mat-icon></button>
-								<mat-menu #basic="matMenu">
+								<mat-menu #basic="matMenu" class="each-lang-card" >
 									<ng-container *ngFor="let data1 of data.formatOption[langCode];">
 										<button id="{{data1.value}}Btn" mat-menu-item>
 											<div class="check-box-card" (click)="captureCheckboxValue($event, data,data1)">
@@ -38,7 +38,7 @@ <h3 style="color: #505050;">{{'personalisedcard.title' | translate}}</h3>
 					</table>					
 				</td></mat-grid-tile><mat-grid-tile>
 				<td style="vertical-align: top;" [style.width] = "previewWidth">
-					<div class="seleted-details-card" id="seleted-details-card" [style.width]="previewWidth">
+					<div class="seleted-details-card" id="seleted-details-card" >
 					<table style="width: 100%; max-height: 217px;">
 						<tr >
 							<td rowspan='2'  *ngIf="dataDisplay['photo']" style="width: 25%;"><img [src]="dataDisplay['photo']['value']" alt='' width='70px' height='70px' style="border-radius: 10%;" /></td>

diff --git a/resident-ui/src/app/feature/uinservices/personalisedcard/personalisedcard.component.ts b/resident-ui/src/app/feature/uinservices/personalisedcard/personalisedcard.component.ts
@@ -55,7 +55,7 @@ export class PersonalisedcardComponent implements OnInit, OnDestroy {
         if (active === "small") {
           this.cols = 1;
           this.width = "40em";
-          this.previewWidth = "40em"
+          this.previewWidth = "25em"
           this.attributeWidth = "20em";
         }
         if (active === "extraSmall") {
@@ -136,7 +136,7 @@ export class PersonalisedcardComponent implements OnInit, OnDestroy {
       this.schema.forEach(data =>{
         this.valuesSelected.push(data.attributeName)
       })
-    });
+    });   
   }
 
   getUserInfo() {

diff --git a/resident-ui/src/app/feature/uinservices/sharewithpartner/sharewithpartner.component.css b/resident-ui/src/app/feature/uinservices/sharewithpartner/sharewithpartner.component.css
@@ -171,6 +171,15 @@ button[disabled=disabled], button:disabled {
   color: #505050;
 }
 
+::ng-deep .mat-menu-panel.each-lang-card{
+  min-height: 55px !important;
+  max-height: 200px !important;
+}
+
+::ng-deep .cdk-overlay-connected-position-bounding-box{
+  bottom: 30px !important;
+}
+
 @media screen and (max-width:465px){
   .each-property{
       width: 65%;

diff --git a/resident-ui/src/app/feature/uinservices/sharewithpartner/sharewithpartner.component.html b/resident-ui/src/app/feature/uinservices/sharewithpartner/sharewithpartner.component.html
@@ -34,7 +34,7 @@ <h3 style="color: #050505;">{{'sharewithpartner.title' | translate}}</h3>
 											[matMenuTriggerFor]="basic">{{data.formatOptionLabel[langCode]}}
 											<mat-icon>keyboard_arrow_down</mat-icon>
 										</button>
-										<mat-menu #basic="matMenu">
+										<mat-menu #basic="matMenu" class="each-lang-card">
 											<ng-container *ngFor="let data1 of data.formatOption[langCode];">
 												<button id="{{data1.value}}Btn" mat-menu-item>
 													<div class="check-box-card" (click)="captureCheckboxValue($event, data,data1)">
@@ -82,7 +82,7 @@ <h3 style="color: #050505;">{{'sharewithpartner.title' | translate}}</h3>
 										</tr>
 								</table>
 							</div>
-							<table [style.width]="width">
+							<table [style.width]="previewWidth">
 								<tr>
 									<td style="padding-bottom: 10px;font-size: 14px;">
 										<mat-label>{{'sharewithpartner.partnerName' | translate}}<span
@@ -91,7 +91,7 @@ <h3 style="color: #050505;">{{'sharewithpartner.title' | translate}}</h3>
 								</tr>
 								<tr>
 									<td>
-										<mat-select class="enable-dropdown" id="partnerDetails" [style.width]="previewWidth">
+										<mat-select class="enable-dropdown" id="partnerDetails">
 											<mat-option (onSelectionChange)="captureDropDownValue($event)"
 												*ngFor="let partnerDetail of partnerDetails"
 												[id]="partnerDetail.organizationName" [value]="partnerDetail.partnerID">
@@ -107,7 +107,7 @@ <h3 style="color: #050505;">{{'sharewithpartner.title' | translate}}</h3>
 								</tr>
 								<tr>
 									<td>
-									<span class="purpose-search-card" [style.width]="previewWidth">
+									<span class="purpose-search-card" >
 										<textarea [attr.maxlength]="totalCommentCount" 
 											id="sharingReasonPlaceholder" class="purpose-input-box" matInput
 											placeholder="{{'sharewithpartner.sharingReasonPlaceholder' | translate}}"

diff --git a/resident-ui/src/app/feature/uinservices/sharewithpartner/sharewithpartner.component.ts b/resident-ui/src/app/feature/uinservices/sharewithpartner/sharewithpartner.component.ts
@@ -87,13 +87,13 @@ export class SharewithpartnerComponent implements OnInit, OnDestroy {
         if(active === "medium"){
           this.cols = 2;
           this.width = "25em";
-          this.previewWidth = "25em"
+          this.previewWidth = "23em"
           this.attributeWidth = "12em";
         }
         if(active === "small"){
           this.cols = 1;
           this.width = "35em";
-          this.previewWidth = "35em"
+          this.previewWidth = "30em"
           this.attributeWidth = "20em";
         }
         if(active === "extraSmall"){

diff --git a/resident-ui/src/app/shared/header/header.component.css b/resident-ui/src/app/shared/header/header.component.css
@@ -112,6 +112,9 @@
   overflow-y: scroll;
   overflow-x: hidden;
 }
+::ng-deep .cdk-overlay-connected-position-bounding-box{
+  right: 5px !important;
+}
 
 ::ng-deep .mat-menu-panel.myMenu > .mat-menu-content {
   width: 300px !important;

diff --git a/resident-ui/src/styles.css b/resident-ui/src/styles.css
@@ -496,4 +496,8 @@ button{
   float: right; 
   color: grey; 
   cursor: pointer;
+}
+
+::-webkit-scrollbar{
+   width: 5px;
 }