Ausklappbare Spalten mit Bootstrap

Die neue Website von Susanna Drescher sollte auf Wunsch der Fotografin ein Onepager werden. Die Galerie sollte ähnlich wie bei der Bildersuche auf Google beim anklicken der einzelnen Alben als ausklappbares Popup nach unten geöffnet werden.

Nach dem ich auf Codrops (tympanus.net) einen recht guten Artikel gefunden hatte, wie man eine solche Galerie erstellen kann (Demo), hatte ich mich vorerst entschieden, die Albenübersicht mit display: inline-block zu realisieren. Weil die ganze Website aber responsive sein sollte für mobile Geräte (Handys und Tablets, vorallem iOS), sollte das ganze System für die ausklappbaren Spalten mit Bootstrap gemacht werden. Das Problem dabei war, dass die ausgeklappten Spalten mit Bootstraps Gird system (z.B. .row .col-sm-3) mit floats gemacht sind und deshalb die folgenden Elemente nach der ausgeklappten Spalte nicht wie gewünscht unterhalb des Popups weitergingen, sondern oben seitlich daneben gefloated wurden. Zudem sollte die Albenübersicht so flexibel sein, dass es auf allen Geräten funktioniert und sogar beim Vergrössern und Verkleinern des Browserfensters das Layout erhalten bleibt; alles möglichst ohne JavaScript.

Artikel auf kimbryant.net und auf CSS-Tricks haben mir weitergeholfen und gezeigt, wie sich Bootstrap so erweitern lässt, dass die nachfolgenden Spalten wie gewünscht unterhalb des Popups folgen. Der verwendete CSS reset dabei war:

div[class^="col"] {
    float: none;
    display: inline-block;
}

Und die Spalten wurden mit Kommentaren aneinander gebunden, damit keine Leerzeichen dazwischen entstehen.

<div class="container">
    <div class="row"><!--
        --><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div><!--
        --><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div><!--
        --><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 active"><!-- Albumbild und Popup --></div><!--
        --><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div><!--
    --></div>
</div>

Beim weiterarbeiten an der Website bin ich zufällig in der Bootstrap Dokumentation auf einen Reset gestossen, der die «cols» je nach aktueller Browsergrösse umbrechen lässt. Und mit diesem Clearfix ist es auch mit dem normalen gird system von Bootstrap möglich die Spalten an der richtigen stelle umbrechen zu lassen ohne auf inline-block zurückgreifen zu müssen. Der Trick dabei ist nach jeder Spalte ein div.clearfix einzufügen, das aber nur bei den benötigten Browsergrössen greift. Bei xs nach jeder Spalte, bei sm nach jeder zweiten, bei md nach jeder dritten und bei lg nach jeder vierten.

<div class="container">
    <div class="row">
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 active"><div class="gallery-img"><!-- Albumbild --></div><div class="popup"><!-- Popup --></div></div>
        <div class="clearfix visible-xs-block visible-sm-block"></div>
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div>
        <div class="clearfix visible-xs-block visible-md-block"></div>
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div>
        <div class="clearfix visible-xs-block visible-sm-block visible-lg-block"></div>
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block"></div>
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"><!-- Albumbild --></div>
    </div>
</div>

Natürlich lässt sich das in PHP ziemlich einfach mit einer Schleife programmieren, die nach jeder Spalte überprüft ob der Index der aktuellen Spalten durch 1, 2, 3 und 4 teilbar ist. Ein Beispiel dafür in einer GitHub Gist.

Wenn man mit Popups arbeitet die immer gleich hoch sind, dann könnte man per CSS relativ leicht die Höhe für die geöffnete Spalte definieren (z.B.: .col.active { height: 500px; }), weil bei meiner Lösung das Popup aber bei unterschiedlichen Browsergrössen und Inhalten auch unterschiedlich gross angezeigt wird, ist es bei notwendig, die Höhe der Spalte per JavaScript (jQuery) zu berechnen:

$(window).resize(function() {
    var col = $('.col.active');
    col.css('height', parseInt(col.find('.gallery-img').css('height'), 10) + parseInt(col.find('.popup').css('height'), 10));
});
$(window).trigger('resize');

Damit das Popup wie gewünscht auf die komplette vorhandene Breite angezeigt wird sind noch einige Styleangaben per CSS notwendig. Ansonsten würde das Popup nur die Breite bekommen die auch der Spalte zur Verfügung steht.

.col {
    position: static;
}

.popup {
    left: 0;
    top: auto;
    position: absolute;
    width: 100%;
}