Merge pull request #455 from Madhuravas/develop

MOSIP-27103 Added margin for drop down panel
mosip · Aug 29, 2023 · e505683 · e505683
2 parents 6c8b556 + d0d7c03
commit e505683
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 12 deletions.
diff --git a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css
@@ -334,6 +334,18 @@ label{
   border-radius: 5px;
 }
 
+.mat-select-panel-wrap{
+  position: relative;
+  top: 26px;
+}
+
+::ng-deep .mat-select-panel{
+  margin-left: 1rem;
+}
+::ng-deep .mat-option{
+  padding: 0 10px;
+}
+
 @media screen and (min-width:989px) {
   .table-main-card{
     display: flex;

diff --git a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.html b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.html
@@ -99,7 +99,7 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                             <td width="10%"></td>
                             <td width="45%">
                               <mat-form-field style="min-width: 73%;">
-                                <mat-select class="enable-dropdown" [(ngModel)]="selected" id="{{field.attributeName}}">
+                                <mat-select disableOptionCentering class="enable-dropdown" [(ngModel)]="selected" id="{{field.attributeName}}">
                                   <mat-option *ngFor="let data of dropDownValues[field.attributeName]"
                                     (onSelectionChange)="captureDropDownValue($event, field.attributeName, supportedLanguages[0], field.dataType, buildJSONData[field.attributeName][langCode])"
                                     [value]="data.code">{{ data.value }}</mat-option>
@@ -129,7 +129,7 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           </tr>
                           <tr>
                             <td width="45%">
-                              <mat-select class="enable-dropdown"
+                              <mat-select disableOptionCentering class="enable-dropdown"
                                 [value]="proofOfIdentity['documenttype'] ? proofOfIdentity['documenttype'] : '' "
                                 id="{{field.attributeName}}">
                                 <mat-option style="min-width: 25.2rem;"
@@ -321,7 +321,7 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                               </td>
                               <td width="10%"></td>
                               <td width="45%" class="each-Hierarchy-td" >
-                                <mat-select  [ngClass]="dynamicDropDown[field.name]?.length === 0 ? 'disable-dropdown' : 'enable-dropdown'" [value]="dynamicFieldValue[field.name]" id="{{field.name}}"
+                                <mat-select disableOptionCentering placeholder="{{langJson.select}} {{field.labelName[langCode][1]}}"  [ngClass]="dynamicDropDown[field.name]?.length === 0 ? 'disable-dropdown' : 'enable-dropdown'" [value]="dynamicFieldValue[field.name]" id="{{field.name}}"
                                   (selectionChange)="loadLocationDataDynamically($event, field.locationHierarchyLevel);" >
                                   <mat-option *ngFor="let data of dynamicDropDown[field.name]" [value]="data">
                                     {{ data.name }}
@@ -349,7 +349,7 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                             </tr>
                             <tr>
                               <td width="45%">
-                                <mat-select class="enable-dropdown"
+                                <mat-select disableOptionCentering class="enable-dropdown"
                                   [value]="proofOfAddress['documenttype'] ? proofOfAddress['documenttype'] : '' "
                                   id="{{field.attributeName}}">
                                   <mat-option style="min-width: 25.2rem;"
@@ -558,7 +558,7 @@ <h3 class="tab-headings">{{'updatedemographic.languageHeading' | translate}}</h3
                   *ngIf="field.tabgroup === 'notificationLanguage' && field.controlType === 'dropdown'">
                   <mat-card-header><mat-card-title>{{field.labelName[langCode][1]}}</mat-card-title></mat-card-header>
                   <!-- <mat-card-subtitle> -->
-                    <mat-select class="enable-dropdown" [(ngModel)]="selected2" id="{{field.attributeName}}">
+                    <mat-select disableOptionCentering class="enable-dropdown" [(ngModel)]="selected2" id="{{field.attributeName}}">
                       <mat-option *ngFor="let data of newNotificationLanguages"
                         (onSelectionChange)="capturePerfLang($event, field.attributeName, langCode, field.dataType)"
                         [value]="data.code">{{ data.name }}</mat-option>

diff --git a/resident-ui/src/assets/i18n/ara.json b/resident-ui/src/assets/i18n/ara.json
@@ -382,7 +382,8 @@
         "sameNameInputErrorMsg": "الاسم الذي أدخلته موجود بالفعل. يرجى إدخال اسم جديد للمتابعة.",
         "sameDobInputErrorMsg": "تاريخ الميلاد الذي أدخلته موجود بالفعل. يرجى إدخال تاريخ ميلاد جديد للمتابعة.",
         "sameGenderInputErrorMsg": "الجنس الذي اخترته موجود بالفعل. يرجى اختيار جنس جديد للمتابعة.",
-        "EnterAllAddress":"الرجاء التحديد"
+        "EnterAllAddress":"الرجاء التحديد",
+        "select":"يختار"
     },
     "preview": {
         "title": "معاينة"

diff --git a/resident-ui/src/assets/i18n/eng.json b/resident-ui/src/assets/i18n/eng.json
@@ -407,7 +407,8 @@
         "sameNameInputErrorMsg": "The name you have entered already exists. Please enter a new name to proceed.",
         "sameDobInputErrorMsg": "The DOB you have entered already exists. Please enter a new DOB to proceed.",
         "sameGenderInputErrorMsg": "The gender you have chosen already exists. Please choose a new gender to proceed.",
-        "EnterAllAddress":"Please select"
+        "EnterAllAddress":"Please select",
+        "select":"Select"
     },
     "preview": {
         "title": "Preview"

diff --git a/resident-ui/src/assets/i18n/fra.json b/resident-ui/src/assets/i18n/fra.json
@@ -400,7 +400,8 @@
         "sameNameInputErrorMsg": "Le nom que vous avez saisi existe déjà. Veuillez saisir un nouveau nom pour continuer.",
         "sameDobInputErrorMsg": "La date de naissance que vous avez saisie existe déjà. Veuillez saisir une nouvelle date de naissance pour continuer.",
         "sameGenderInputErrorMsg": "Le genre que vous avez choisi existe déjà. Veuillez choisir un nouveau genre pour continuer.",
-        "EnterAllAddress":"Veuillez sélectionner"
+        "EnterAllAddress":"Veuillez sélectionner",
+        "select":"Sélectionner"
     },
     "preview": {
         "title": "Aperçu"

diff --git a/resident-ui/src/assets/i18n/hin.json b/resident-ui/src/assets/i18n/hin.json
@@ -400,7 +400,8 @@
         "sameNameInputErrorMsg": "आपने दर्ज किए गए नाम मौजूद हैं। कृपया आगे बढ़ने के लिए एक नया नाम दर्ज करें।",
         "sameDobInputErrorMsg": "आपने दर्ज की गई जन्मतिथि पहले से मौजूद है। कृपया आगे बढ़ने के लिए एक नई जन्मतिथि दर्ज करें।",
         "sameGenderInputErrorMsg": "आपने चुना हुआ लिंग पहले से मौजूद है। कृपया आगे बढ़ने के लिए एक नया लिंग चुनें।",
-        "EnterAllAddress":"कृपया चयन कीजिए"
+        "EnterAllAddress":"कृपया चयन कीजिए",
+        "select":"चुनना"
     },
     "preview": {
         "title": "पूर्व दर्शन"

diff --git a/resident-ui/src/assets/i18n/kan.json b/resident-ui/src/assets/i18n/kan.json
@@ -400,7 +400,8 @@
         "sameNameInputErrorMsg": "ನೀವು ನಮೂದಿಸಿದ ಹೆಸರು ಈಗಾಗಲೇ ಇದೆ. ಮುಂದುವರೆಸಲು ಹೊಸ ಹೆಸರನ್ನು ನಮೂದಿಸಿ.",
         "sameDobInputErrorMsg": "ನೀವು ನಮೂದಿಸಿದ ಜನ್ಮ ದಿನಾಂಕ ಈಗಾಗಲೇ ಇದೆ. ಮುಂದುವರೆಸಲು ಹೊಸ ಜನ್ಮ ದಿನಾಂಕವನ್ನು ನಮೂದಿಸಿ.",
         "sameGenderInputErrorMsg": "ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಲಿಂಗ ಈಗಾಗಲೇ ಇದೆ. ಮುಂದುವರೆಸಲು ಹೊಸ ಲಿಂಗವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ.",
-        "EnterAllAddress":"ದಯವಿಟ್ಟು ಆಯ್ಕೆ ಮಾಡು"
+        "EnterAllAddress":"ದಯವಿಟ್ಟು ಆಯ್ಕೆ ಮಾಡು",
+        "select":"ಆಯ್ಕೆ ಮಾಡಿ"
     },
     "preview": {
         "title": "ಮುನ್ನೋಟ"

diff --git a/resident-ui/src/assets/i18n/spa.json b/resident-ui/src/assets/i18n/spa.json
@@ -400,7 +400,8 @@
         "sameNameInputErrorMsg": "El nombre que has ingresado ya existe. Por favor, ingresa un nombre nuevo para continuar.",
         "sameDobInputErrorMsg": "La fecha de nacimiento que has ingresado ya existe. Por favor, ingresa una fecha de nacimiento nueva para continuar.",
         "sameGenderInputErrorMsg": "El género que has elegido ya existe. Por favor, elige un género nuevo para continuar.",
-        "EnterAllAddress":"Por favor selecciona"
+        "EnterAllAddress":"Por favor selecciona",
+        "select":"Seleccionar"
     },
     "preview": {
         "title": "Avance"

diff --git a/resident-ui/src/assets/i18n/tam.json b/resident-ui/src/assets/i18n/tam.json
@@ -400,7 +400,8 @@
         "sameNameInputErrorMsg": "நீங்கள் உள்ளிட்ட பெயர் ஏற்கனவே உள்ளது. தயவுசெய்து முதலில் ஒரு புதிய பெயரை உள்ளிடவும்.",
         "sameDobInputErrorMsg": "நீங்கள் உள்ளிட்ட பிறந்த தேதி ஏற்கனவே உள்ளது. தயவுசெய்து முதலில் ஒரு புதிய பிறந்த தேதியை உள்ளிடவும்.",
         "sameGenderInputErrorMsg": "நீங்கள் தேர்ந்தெடுத்த பாலினத்தை ஏற்கனவே உள்ளது. தயவுசெய்து முதலில் ஒரு புதிய பாலினத்தை தேர்ந்தெடுக்கவும்.",
-        "EnterAllAddress":"தயவு செய்து தேர்வு செய்யவும்"
+        "EnterAllAddress":"தயவு செய்து தேர்வு செய்யவும்",
+        "select":"தேர்ந்தெடு"
     },
     "preview": {
         "title": "முன்னோட்ட"

diff --git a/resident-ui/src/styles.css b/resident-ui/src/styles.css
@@ -404,6 +404,7 @@ app-document > ul{
   outline-width: thin;
   border-radius: 5px;
   color: white !important;
+  font-size: 15px;
 }
 
 .mat-select-trigger {