diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html index 4dcb653db..270c9479b 100644 --- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html +++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html @@ -17,22 +17,24 @@ - -
-
- + +
+
+ - {{ item.getTitle() | translate }} + + {{ item.getTitle() | translate }} + cancel
-
diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss index 63db9e233..753c7e2c6 100644 --- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss +++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss @@ -3,21 +3,17 @@ } .os-search-value-selector-chip-container { - position: absolute; - padding: 8px; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - top: 52px; - width: 100%; - background: white; - z-index: 100; - min-height: 41px; + margin: 5px; + width: max-content; + height: 30px; + + .mat-chip { + max-width: 150px; + } } -.os-search-value-selector-chip-placeholder { - padding: 8px; - width: 100%; - background: white; - min-height: 39px; +.h-scroller { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .os-not-found-button { diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts b/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts index 4de12f155..9cbeba6bb 100644 --- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts +++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts @@ -55,9 +55,6 @@ import { Selectable } from '../selectable'; changeDetection: ChangeDetectionStrategy.OnPush }) export class SearchValueSelectorComponent extends BaseFormControlComponentDirective { - @ViewChild('chipPlaceholder', { static: false }) - public chipPlaceholder: ElementRef; - @ViewChild(CdkVirtualScrollViewport, { static: true }) public cdkVirtualScrollViewPort: CdkVirtualScrollViewport; @@ -134,10 +131,6 @@ export class SearchValueSelectorComponent extends BaseFormControlComponentDirect public controlType = 'search-value-selector'; - public get width(): string { - return this.chipPlaceholder ? `${this.chipPlaceholder.nativeElement.clientWidth - 16}px` : '100%'; - } - /** * All items */