Igualar alto de columnas en Foundation

Clase 14 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

¿Cómo manejamos la diferencia de altos de las columnas?

Para esto vamos a utilizar Equalizer, una librería integrada en Foundation.

David Camacho

student•

Foundation nos brinda una manera muy sencilla para igualar el alto de cualquier elemento de nuestra web.

Para ello es necesario es necesario utilizar Equalizer, y para utilizar equalizer debemos agregar atributos al div con clase 'row' o al elemento padre le vamos a agregar dos atributos:

El atributo data-equalizer.

El atributo data-equalizer-on="small" donde especificamos desde que tamaño va a empezar a igualar los elementos.

Y luego debemos igualar los elementos, para ello les agregamos los atributos 'data-equalizer-watch' De esta manera foundation les proporcionará el mismo alto a esos elementos.

Alejandro Pinto

student•

es data-equalize-on="small"

Cesar David Ramírez Dimaté

student•

<div class="row" data-equalizer data-equialize-on="small">
...
<li data-equalizer-watch>Una bebida incluida para cada día</li>

Dylan Giron

student•

Me di cuenta que si no ponemos el atributo data-equalize-on="small" de igual forma iguala los elementos, así que supuse que es porque Foundation por defecto hace el igualamiento desde small en adelante, alguien podría confirmar esto?

Duvan Jimenez

student•

Lo dijo al principio del curso, si ponemos small-12 sera 12en todas las resulusiones a menos que pongas un medium o large, funciona igual para todos los atributos no solo para las columnas

JAIME URQUIZU

student•

A mí no me iguala nada… además, desde que incluimos las fotos de las otras bandas, tampoco se ven. Sólo aparece la del viernes… y esto no iguala… creo que deberían comprobar que en todos los SO funciona de la misma manera y si no, al menos, decir cómo hacerlo en otro SO si es que falla.

Jhon Alexander Leon Ortecho

student•

No te aparece las imagenes ya que, orbit tiene un pequeño problema a la hora que lo unes con los tabs, para solucionar esto agrega estos estilos a tu app.css

.orbit-container {
    height: auto !important;
}
.orbit-slide {
    max-height: none !important;
}

JAIME URQUIZU

student•

Gracias AlexJL, ya lo había solucionado, aunque de otra manera. Cierto es que de la tuya se hace más corto y gastas menos código, o sea más eficiente. La tendré en cuenta!!! Genial, gracias de nuevo!
No obstante reitero que deberían tener estos datos en cuenta cuando hacen los cursos y (ya que a veces incluyen fe de erratas con actualizaciones o posts con soluciones a problemas) deberían hacer lo mismo. No cuesta nada, mantienen al alumnado contento, evitan frustraciones innecesarias y ayudan a adelantar más.

Ivan Cardozo

student•

Recuerden que :

data-equalizer es un atributo y no una clase ,

cometi el error de meter el atributo dentro de las comillas

y no me igualaba .

<div class="row" data-equalizer data-equalize-on:"small">

Tambien recordar que se escribe **data-equalize-on
** y no data-equalizER-on

Fueron errores que cometi¡¡

Arturo Rojas Enei

student•

Y qué pasa si los elementos de lista sobre los que se quiere usar el data-equalizer-watch son más de 2?

Por ejemplo, si también quisiéramos ajustar el que está debajo, le agrego los tags nuevamente pero no funciona. Hay que hacer algo distinto cuando son más de 2 los elementos a igualar el alto?

Carlos Francisco Betancourt Requena

student•

Equalizer.

Para configurar equalizer, es necesario un contenedor (puede ser un row) con una serie de elementos secundarios, el contenedor lleva el atributo data-equalizer, y los elementos secundarios que causan la diferencia en la altura deben llevar el atributo data-equalizer-watch. Todos los elementos secundarios se re-dimensionarán para tener la misma altura.

El atributo data-equalize-on se utiliza en el contenedor y sirve para especificar el tamaño desde el cual vamos a normalizar el alto de los elementos.

Juan David lemus Rubiano

student•

veo que con estos atributos, sin necesidad de darle el tamaño, se arregla los altos de las columnas

Cesar David Ramírez Dimaté

student•

El valor del atributo es para decirle desde donde quieres que empiece a aplicar el equalizer, por ejemplo, no desde small sino desde medium.

Igualar alto de columnas en Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman