• 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.

Coding

3125

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. 

Zuletzt bearbeitet am
Weiterlesen
0
Coding - Firmenblog der qb design