• Home
    Home Hier findest Du alle Beiträge der Seite.
  • Kategorien
    Kategorien Zeigt alle Kategorien.
  • Tags
    Tags Zeigt eine Liste von Tags die im Beitrag verwendet wurden.
  • Autoren
    Autoren Suche nach Mitgliedern.

Foundation Blockgrid Whitespace Problem

von in Coding
  • Schriftgröße: Größer Kleiner
  • Aufrufe: 2841
  • 0 Kommentare
  • Drucken
2841

Bei einem Webprojekt eines Kunden musste heute der View einer Produkfinder Komponente fertig gemacht werden.

Basics zum Block-Grid:
Die einzelnen Produkte werden in einem Foundation Blockgrid Container geladen und dann bei Anwendung des Filters dynamisch per Javascript ausgeblendet.
Der Container wird per

 

<ul id="ul-ID" class="small-block-grid-3">
  <li id="li-id1"><!-- Your content goes here --></li>
  <li id="li-id2"><!-- Your content goes here --></li>
  <li id="li-id3"><!-- Your content goes here --></li>
  <li id="li-id4"><!-- Your content goes here --></li>
  <li id="li-id5"><!-- Your content goes here --></li>
  <li id="li-id6"><!-- Your content goes here --></li>
</ul>

 

 

initialisiert. Das ganze erzeugt dann ein Block Grid mit gleichmäßigen dynamischen Abständen zwischen den Elementen. Die '3' am Ende der ul classen definition gibt dabei als Parameter an, dass eine Zeile des Grid 3 Elemente enthalten soll.

Problem:

Wird nun einem der <li> Elemente der Style display:none; zugewiesen, so wird der Container auch korrekt ausgeblendet. Probleme gibt's erst, wenn mehr als eine Zeile mit Elementen belegt sind und man z.B. das dritte Element der 1. Zeile ausblendet. Man würde erwarten, dass der Platz nach WC3 nicht mehr freigehalten wird und die übrigen Elemente aufrücken - genau dass passiert aber nicht. 

 

Primär liegt dass an der Art und Weise, wie Foundation die Position der Zeilenumbrüche kalkuliert. Im SCSS wird einfach die Anzahl der Elemente im Container gezählt und dieses kleine Script interessiert es dabei herzlich wenig, ob das Element angezeigt wird oder nicht. Solange es in der DOM ist, gilt es (richtiger Weise) als existent. Was kann man tun um eine geschlossene Darstellung zu erreichen?

Lösung:

Wenn die Reihenfolge der Elemente nicht relevant ist, kann das entsprechende <li> Element nach dem ausblenden einfach an das Ende des <ul> Containers verschoben werden:

 

//Bsp. wenn das Dritte Element zuvor ausgeblendet wurde
 jQuery('#li-id3').appendTo("#ul-ID");

Das sorgt dann dafür, dass alle angezeigten Elemente in einer geschlossenen Reihe dargestellt werden - super easy.

Hilfreich?
Dann gib dem ganzen einen Like @coderwall

 

Zuletzt bearbeitet am
0

Kommentare

  • Derzeit gibt es keine Kommentare. Schreibe den ersten Kommentar!

Kommentar hinterlassen

Gast Samstag, 24 Juni 2017
Foundation Blockgrid Whitespace Problem - Firmenblog der qb design