Fix the visibility of multiple-row chips and the alignment of the ico…

…n button (#1980) Co-authored-by: Pratik Prajapati <[email protected]>
CarnegieLearningWeb · Sep 24, 2024 · f88833f · f88833f
1 parent 1948a31
commit f88833f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 32 deletions.
diff --git a/...ared-standalone-component-lib/components/common-tag-input/common-tag-input.component.html b/...ared-standalone-component-lib/components/common-tag-input/common-tag-input.component.html
@@ -9,38 +9,40 @@
     {{ label | translate }}
     <span *ngIf="inputType === CommonTagInputType.VALUES" class="required-asterisk">*</span>
   </mat-label>
-  <div class="chips-container dense-2">
-    <mat-chip-grid #tagsList>
-      <mat-chip-row
-        *ngFor="let componentTag of tags.value"
-        [selectable]="isChipSelectable"
-        [removable]="isChipRemovable"
-        (removed)="removeChip(componentTag)"
-      >
-        <span class="chip-label">
-          {{ componentTag }}
-        </span>
-        <mat-icon matChipRemove *ngIf="isChipRemovable">cancel</mat-icon>
-      </mat-chip-row>
+  <div class="chips-wrapper">
+    <div class="chips-container dense-2">
+      <mat-chip-grid #tagsList>
+        <mat-chip-row
+          *ngFor="let componentTag of tags.value"
+          [selectable]="isChipSelectable"
+          [removable]="isChipRemovable"
+          (removed)="removeChip(componentTag)"
+        >
+          <span class="chip-label">
+            {{ componentTag }}
+          </span>
+          <mat-icon matChipRemove *ngIf="isChipRemovable">cancel</mat-icon>
+        </mat-chip-row>
 
-      <input
-        [matChipInputFor]="tagsList"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-        [matChipInputAddOnBlur]="addChipOnBlur"
-        (matChipInputTokenEnd)="addChip($event)"
-        (focus)="onFocus()"
-        (blur)="onBlur()"
-        [placeholder]="tagsExist ? '' : (placeholder | translate)"
-        autocomplete="off"
-        class="ft-14-400"
-      />
-    </mat-chip-grid>
-    <div *ngIf="inputType === CommonTagInputType.VALUES" class="sharing-icon-buttons">
-      <button mat-icon-button class="icon-button" (click)="onActionButtonClick($event)">
-        <span class="material-symbols-outlined">
-          {{ tagsExist ? 'download' : 'upload' }}
-        </span>
-      </button>
+        <input
+          [matChipInputFor]="tagsList"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          [matChipInputAddOnBlur]="addChipOnBlur"
+          (matChipInputTokenEnd)="addChip($event)"
+          (focus)="onFocus()"
+          (blur)="onBlur()"
+          [placeholder]="tagsExist ? '' : (placeholder | translate)"
+          autocomplete="off"
+          class="ft-14-400"
+        />
+      </mat-chip-grid>
+      <div *ngIf="inputType === CommonTagInputType.VALUES" class="sharing-icon-buttons">
+        <button mat-icon-button class="icon-button" (click)="onActionButtonClick($event)">
+          <span class="material-symbols-outlined">
+            {{ tagsExist ? 'download' : 'upload' }}
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </mat-form-field>

diff --git a/...ared-standalone-component-lib/components/common-tag-input/common-tag-input.component.scss b/...ared-standalone-component-lib/components/common-tag-input/common-tag-input.component.scss
@@ -7,6 +7,10 @@
 
     .mat-mdc-form-field-infix {
       padding: 6px 0;
+
+      .mat-mdc-chip-remove {
+        padding: 2px 4px;
+      }
     }
   }
 
@@ -30,9 +34,10 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     max-height: 64px;
     overflow: auto;
+    padding-right: 32px;
 
     .mat-mdc-chip-grid {
       width: 100%;
@@ -43,6 +48,10 @@
     }
 
     .icon-button {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
       width: 32px;
       height: 32px;
       background: none;