fietur: <details> viewportabhängig öffnen oder schließen

SELF-Forum

<details> viewportabhängig öffnen oder schließen

fietur (Versionen)
– Informationen zu den Bewertungsregeln

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.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. <details> viewportabhängig öffnen oder schließen

    fietur
    – Informationen zu den Bewertungsregeln

    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>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. <details> viewportabhängig öffnen oder schließen

      Rolf B
      – Informationen zu den Bewertungsregeln

      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

      --
      sumpsi - posui - obstruxi
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. <details> viewportabhängig öffnen oder schließen

        fietur
        – Informationen zu den Bewertungsregeln

        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.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. <details> viewportabhängig öffnen oder schließen

          fietur
          – Informationen zu den Bewertungsregeln

          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.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln