From a517e9f9c8d00c25311245cb89a018d0b3137a49 Mon Sep 17 00:00:00 2001 From: OZGCloud <ozgcloud@mgm-tp.com> Date: Fri, 23 Aug 2024 14:42:52 +0200 Subject: [PATCH] OZG-6301 OZG-6525 Add scrollbar to search results --- .../instant-search/instant-search.component.ts | 2 +- .../search-result-layer.component.ts | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts index b4e2dd528d..0583b7b70b 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts @@ -48,7 +48,7 @@ import { InstantSearchQuery, InstantSearchResult } from './instant-search.model' <ods-aria-live-region [text]="ariaLiveText" /> <ods-search-result-layer *ngIf="results.length && areResultsVisible" - class="absolute z-50 mt-3 w-full" + containerClass="absolute z-50 mt-3 max-h-[calc(50vh)] w-full overflow-y-auto" id="results" > <ods-search-result-header diff --git a/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts index 971e06b585..f06c873fc8 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts @@ -1,15 +1,22 @@ import { CommonModule } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'ods-search-result-layer', standalone: true, imports: [CommonModule], - template: `<div class="rounded-lg border border-primary-600/50 bg-background-50 shadow-lg"> + template: `<div + [ngClass]="[ + 'rounded-lg border border-primary-600/50 bg-background-50 shadow-lg', + containerClass, + ]" + > <ng-content select="[header]" /> <ul role="list"> <ng-content /> </ul> </div>`, }) -export class SearchResultLayerComponent {} +export class SearchResultLayerComponent { + @Input() containerClass: string = ''; +} -- GitLab