<details> viewportabhängig öffnen oder schließen
![](/uploads/default_avatar/thumb/missing.png)
- css
- html
Hallo,
ich habe Probleme mit der Festlegung der Breite einzelner Container in einem Grid, in denen sich teilweise <details>
mit ihrem <summary>
befinden, die die Breite ihrer Container aber nicht alle ausfüllen. Ober- und Untergrenze der (flexiblen) Breite lassen sich zwar angeben, aber wie notiere ich die width
im CSS so, dass die betroffenen Container ihren Platz auch dann ausfüllen, wenn der Inhalt von <details>
und <summary>
nicht breit genug sind?
Ich suche eine Lösung ohne Javascript, die das HTML nach Möglichkeit unangetastet lässt.
Sorry für den Titel, ließ sich gerade nicht mehr ändern und bezog sich auf ein anderes Problem, das noch als Entwurf vorhanden war.
Sollte eigentlich so (oder so ähnlich) heißen: Container-Breite im Grid einstellen bei <details> und <summary>
Hallo fietur,
was für eine Art von Grid verwendest Du da?
CSS Grid-Layout zieht die details-Elemente per Default auf die Größe der Grid-Zelle.
Rolf
was für eine Art von Grid verwendest Du da?
CSS Grid-Layout zieht die details-Elemente per Default auf die Größe der Grid-Zelle.
Ja, ein CSS Grid. Z.B. für 2 Spalten:
section { display:grid; grid-template-columns: 1fr 1fr; }
Und weil die Größe der enthaltenen Container <article>
nicht festgelegt wird, berechnet der Browser sich die Spaltenbreite aus dem, was angezeigt wird. Der Wert des breitesten Containers bestimmt, wie breit die Zellen werden.
Allerdings nur nach dem, was tatsächlich sichtbar ist. Bei etwas wie
<section>
<article>
<details closed>
<summary>mehr</summary>
Inhalt (aufgeklappt), breit genug für Zeilenumbrüche
</details>
</article>
/* weitere article mit größerer Breite */
</section>
wird nur die Breite von "mehr" verwendet. Sind andere Zellen der Spalte breiter, wird der gezeigte article zu schmal.
Missetäter entdeckt...
<html>
<head>
<style>
section { justify-items:center; } /* <= verursacht den Ärger */
section { display:grid; grid-template-columns: 1fr 1fr; background:yellow; font-size:5em; }
article { background:orange }
article:nth-of-type(4) { background:lime }
</style>
</head>
<body>
<section>
<article>Artikel 1 mit ausreichender Breite</article>
<article>Artikel 2 mit mehr als ausreichender Breite</article>
<article>Artikel 3 mit auch ausreichender Breite</article>
<article><details><summary>Artikel 4</summary>Artikel 4 hat aufgeklappt ausreichende Breite</article>
</section>
</body>
</html>
Das war ein Relikt für ein anderes Layout eines anderen breakpoints, bei dem die Container tatsächlich unterschiedlich breit sein durften (und in kein grid gehörten).
Danke jedenfalls.