loader

Każdy kto tworzył strony w narzędziach takich jak Bootstrap spotkał się z problemem różnych wysokości elementów, mimo, że teoretycznie powinny być one takie same. Częstym przykładem może być element tytułu produktu w sklepie internetowym - gdzie jeden produkt nazwa się „Pendrive 32GB”, gdzie tym czasem w rzędzie znajduje się „Laptop 2 w 1 ACER Switch Alpha 12 SA5-271-37SL”.

Efektem tego jest rozjeżdżający się tekst i content za nim, tak jak na powyższym screenie (na czerwono zaznaczyłem brakującą wysokość.

Sytuacja jeszcze się pogarsza w przypadku gdy chcemy mieć kilka wierszy. Wtedy kolumny po prostu nam się rozjeżdżają w nieprzewidywalny sposób i strona zaczyna wyglądać bardzo nieprzystępnie.

Na kłopoty jQuery

Na portalu Github, możemy znaleźć świetną bibliotekę, która w bardzo prosty sposób pozwoli nam raz na zawsze pozbyć się problemu.

Przejdź do GitHub

Mamy dwie drogi instalacji biblioteki - poprzez instalator pakietów Bower lub poprzez manualnie poprzez ściągniecie  archiwum. W obu przypadkach powinniśmy dołączyć nasz skrypt pod biblioteką jQuery w kodzie HTML.

Podstawowe użycie biblioteki sprowadza się do wybrania klasy CSS oraz użycie odpowiedniej funkcji.

<div class="wrapper">
	<div class="wrap-element">
       	    <div class="element">
Content
More Content
More Content
</div> </div> <div class="wrap-element"> <div class="element">
Content
</div> </div> </div>

Założmy, że mamy kod jak na powyższym przykładzie. Aby otrzymać równą wysokość elementów tekstowych wystarczy, że dodamy kod:

$('.element').responsiveEqualHeightGrid();

 

I tyle!

Od teraz, elementy będą miały taką samą wysokość. Biblioteka jest bardzo mała oraz zoptymalizowana do użycia przed „odpaleniem” eventu DocumentReady.

Komentarze nie publikowane na Facebook'u

O Allset

Allset to firma zajmująca się tworzeniem stron internetowych w pełnym znaczeniu tych słów. Tworzymy zarówno małe projekty firmowe jak i duże aplikacje internetowe. Chcemy przekazać Wam nasze bezcenne doświadczenia zdobyte w tej dziedzinie.

662-075-782

All rights reserved by Allset Żywiec © 2017