> For the complete documentation index, see [llms.txt](https://kolibri-selection-component.gitbook.io/generalisierte-auswahlkomponente-fur-kolibri/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kolibri-selection-component.gitbook.io/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.5-dropdown-container.md).

# 4.5 Dropdown-Container

## 4.5 Dropdown-Container

Für die Darstellung aller Optionen (zu gegebener Zeit) stehen verschiedene Varianten zur Auswahl. Eine Möglichkeit ist, den Container als HTML-Dialog zu gestalten. Die vorhandenen Funktionen sind jedoch nicht für diese Komponente geeignet. Für den gewünschten Zweck erfordert das Dialog-Element noch einiges an benutzerdefinierter Anpassung.

Eine weitere Variante ist, ein normales `div` als Options-Container zu verwenden. Dies erfordert ebenfalls einen enormen Implementationsaufwand. Eine Anwendung dieses Ansatzes findet sich in der ersten Version der Komponente. Hierbei eröffnet sich das Problem der Inkonsistenz zwischen UI und Controller. Zudem ist es möglich, dass unerwünscht mehrere Dropdown-Container gleichzeitig offen sind.

Als dritte Möglichkeit bietet sich die Popover-API an. Seit 2024 unterstützen alle gängigen Browser diese Schnittstelle. Durch das Refactoring der Variante mit dem normalen Div-Container resultiert eine Version mit der Anwendung dieser API. Im Gegensatz zu den beiden oben erwähnten Container-Implementationen reduziert sich durch diese Schnittstelle der Zusatzaufwand. Der Grundaufbau des Popover-Containers ist im folgenden Code 4.8 dargestellt.

{% code title="Code 4.8: Beispiel – Popover-Container" lineNumbers="true" %}

```html
<div popover="auto"
     id="select-component-0-options" 
     class="options-component" 
> <!-- content --> </div>
```

{% endcode %}

Bei diesem Codeausschnitt (4.8) ist wichtig, dass das Attribut `popover` den Wert `auto` erhält. Dies bewirkt, dass sich die Popover automatisch schliessen, wenn ein Klick ausserhalb des Containers passiert. Das Öffnen und Schliessen des Dropdown-Elements lässt sich über das `popovertarget`-Attribut auf der Bedienkomponente steuern. Dieses Target enthält die `id` des Div-Containers mit dem Attribut `popover`. Als Alternative dazu besteht die Möglichkeit, das Popover über JavaScript zu steuern. Hierbei besteht die Möglichkeit, auf den Status und das Event des Togglens zuzugreifen. Diese Funktionalitäten erlauben dem Controller, sich konsistent zum UI zu halten.

Obwohl nur die Unterstützung der aktuellen Browser verlangt ist, soll die Komponente ältere Browser-Versionen nicht komplett ignorieren. Erst seit April 2024 unterstützen alle Browser die Popover-API. Ein Test auf einem veralteten Firefox zeigt, dass die Komponente wegen der Popover-Funktionalität einen Fehler in die Console wirft. Dadurch visualisiert der Browser die Komponente nicht. Der folgende Code 4.9 fängt die Fehlermeldung ab.

{% code title="Code 4.9: Workaround für ältere Browser" lineNumbers="true" %}

```javascript
try {
    /* code block with 
        `popoverContainer.showPopover();`
    or  `popoverContainer.hidePopover();`
    */
} catch (e) {
    /* inform user about unsupported popover 
       the first time an alert popup appears */
}
```

{% endcode %}

Ein Alert-Popup informiert den Nutzer über Einschränkungen(Abbildung B.19 im Anhang [**B**](/generalisierte-auswahlkomponente-fur-kolibri/anhang/b.-neue-komponente-bilder.md)). Einige zusätzliche CSS-Definitionen garantieren eine halbwegs ansehnliche Darstellung. Veraltete Browser, welche das nested CSS *<mark style="color:purple;">\[5]</mark>* und das CSS-`:has()` nicht unterstützen, zeigen die neue Komponenten inkonsistent an.

*<mark style="color:purple;">\[5]</mark>* Verschachtelter CSS-Code mit Verwendung der `&`-Funktionalität&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://kolibri-selection-component.gitbook.io/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.5-dropdown-container.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.