Neulich entspann sich im Kollegenkreis die Frage, wie man einen Inhaltsbereich mit einem MetaModels-Filter so ausgeben kann, dass alle Filter-Selects immer den zur Verfügung stehenden Platz optimal nutzen. Bei einer unbekannten Filteranzahl.
Früher hätte man vielleicht Tabellen genutzt, etwas später Floats, und vor zwei Jahren Flexbox. Jede dieser Techniken hat ihre Berechtigung, aber jede hat Nachteile. Tabellen brauchen Templates, Float möchten gerne, dass alle Inhalte dieselbe Höhe haben, und bei Flexbox schreibt man irgendwann sehr viel CSS. Mit Grid ist das einfacher.
Vorab zum Lesen: Die wundervolle Einführung zu CSS-Grid vom Kollegen Jonas Hellwig. Dabei wird schon deutlich, wie einfach es nutzbar ist. Á propos nutzbar: Seit der Einführung ist der Anteil der Browser, die Grid unterstützen, rapide gestiegen. Im Mai 2017 nähert er sich in Deutschland der 70%-Prozent-Marke, und für den Rest gibt es ein Polyfill.
Die Syntax für CSS-Grid ist erschreckend einfach. Ich sage einem Element, dass seine Kinder bitteschön in Spalten aufzuteilen sind. Das war's im Grunde auch schon. Wenn ich also - wie in der Anwendung - einen MetaModel-Filter habe, dann ist das im Quelltext erst einmal die folgende Syntax:
<div class="formbody"><div class="widget mm_select item1 submitonchange"><label for="ctrl_item1">Label Item 1</label><select name="item1" id="ctrl_item1" class=""><option value="">Nicht filtern</option><option value="value1">Value1</option><option value="value2">Value2</option><option value="value3">Value 3</option>...</select></div><div class="widget mm_select item2 unused submitonchange"><label for="ctrl_item2">Label Item 2</label><select name="item2" id="ctrl_item2" class=""><option value="">Nicht filtern</option><option value="value1">Value 1</option><option value="value2">Value 2</option>...</select></div>...</div>
Also: ein formbody, und als Kinder widget. Das klingt nach einer simplen Aufgabe.
Wir vergeben also die folgenden CSS-Attribute:
.ce_metamodels_frontendfilter .formbody { display: grid; /* Kinder im Grid anzeigen */ grid-template-rows: 3em; /* Reihen mit 3em Abstand */ grid-template-columns: 25% 25% 25% 25%; /* Vier Spalten mit je 25 % Breite '/
Einen Kommentar schreiben
Hast Du Fragen oder Anregungen? Dann nutze die Kommentarfunktion.