Antwort an „Rolf B“ verfassen

SELF-Forum

Aufklappbares Fenster

Rolf B

Hallo Gabriele,

ob ein details-Element oder die popover-Technik für dich günstiger sind, hängt von deinen Designwünschen ab.

Details ist eher nachteilig, wenn man drüber nachdenkt, weil es sich nur durch einen weiteren Klick auf das summary-Element schließen lässt. Das erwartet man bei einem Popup nicht.

Popover ist da besser, weil es automatisch schließt. Die Positionierung relativ zum Footer braucht allerdings Ankerpositionierung und die ist im Firefox noch nicht angekommen. Abgesehen davon kriege ich sie zusammen mit popover spontan nicht hin, das mag sonst jemand rausfinden und erklären.

Grundsätzlich ist es so, dass deine Ablehnung von JavaScript das Problem nicht einfacher macht…

Zu deinen Unsicherheiten bei details:

Blockelemente (wie details oder div) sind von Natur aus so breit wie ihre Elternelemente[1]. Wenn sie schmaler sein sollen, muss man was dafür tun. Aber weil ich von details eigentlich abraten möchte, gehe ich ausführlich darauf ein.

Nur soviel: Damit das details-Element seine Inhalts-Größe annimmt und sich nicht auf die verfügbare Breite aufbläht, kannst Du unter anderem

  • für das details-Element display:inline-block setzen
  • das details-Element in eine Flexbox integrieren. Flex-Items sind standardmäßig so breit wie ihr Inhalt.
  • explizit für details die Eigenschaft width: fit-content; setzen

Rolf

--
sumpsi - posui - obstruxi

  1. Wobei, hm, "Blockelemente" sind sowas von HTML 4... also: die Elemente, die in Phrasing Content enthalten sein dürfen, sind Inline-Elemente und der Rest sind Blockelemente. So in etwa... ↩︎

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen