jQuery Auto Height

Trefwoorden

Als je floating blocks (een beetje CSS ) gebruikt in je node of view, dan zijn ze meestal niet van dezelfde hoogte. Dit is soms storend omdat je lege plaatsen krijgt.

Deze module kijkt per rij wat de hoogste inhoud is en past de hoogte van alle andere blokken in de rij aan. Ook als je dezelfde rij in een ander scherm bekijkt waar er dan meer of minder items worden getoond, blijft het programma kijken naar de hoogste inhoud.

Screen000374.png

In een kleiner scherm met 2 items naast elkaar..

Screen000375.png

Screen000376.png

Screen000377.png

Enkel op smartphone worden ze onder elkaar getoond en hier speelt de hoogte geen rol meer. Logisch.

Screen000378.png

Hoe werkt het? Je maakt een stijl aan bvb de klasse .box en je zet die floating met wat achtergrond en randje bijvoorbeeld.

Screen000371.png

Daarna ga je de inhoud dezelfde klasse geven. De blokken zijn nu reeds zichtbaar maar ze zullen niet van dezelfde hoogte zijn.

Screen000372.png

Bij de instellingen van de module moet je nu de klassen opsommen die aan de auto hoogte zullen voldoen. Zie .box


Screen000373.png

Het is een third party met één bestandje.

Screen000367.png

In een view kan je per rij een klasse toekennen. Het is evident dat de op analoge manier kan gewerkt worden.